3d呈现

站长

2022年09月08日 16:22 · 阅读数 467

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

body {
  perspective: 500px;
}
.box {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
  transition: all 2s;
  /* 给父盒子添加transform-style属性preserve-3d，让子元素保持3d立体效果 */
  transform-style: preserve-3d;
}
.box:hover {
  transform: rotateY(60deg);
}
.box>div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
}
.box>div:last-child {
  background-color: blue;
  transform: rotateX(45deg);
  transition: all 1s;
}

</style></head><body> <div class="box">

<div></div>
<div></div>

</div></body></html>

转载自:https://segmentfault.com/a/1190000041965796