1.透视/景深效果
左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向
- perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
- perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心
- transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中)：
- transform-style:flat 子元素将不保留其 3D 位置-平面方式。
- transform-style:preserve-3d 子元素将保留其 3D 位置—立体方式。
2.制作立方体
html代码：
<body>
<div class="container">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
css代码：
<style>
.container {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
/* 使被转换的子元素保留其 3D 转换(需要设置在父元素中)： */
transform-style: preserve-3d;
/* 给立方体添加旋转动画 */
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
50% {
transform: rotateX(-10deg) rotateY(-360deg);
}
60% {
transform: rotateX(-10deg) rotateY(-340deg);
}
100% {
transform: rotateX(-360deg) rotateY(-340deg);
}
}
.container>div {
width: 200px;
height: 200px;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
}
.front {
background-color: red;
transform: translateZ(100px);
}
.back {
background-color: green;
transform: translateZ(-100px) rotateY(180deg);
}
.left {
background-color: purple;
transform: translateX(100px) rotateY(90deg);
}
.right {
background-color: pink;
transform: translateX(-100px) rotateY(-90deg);
}
.top {
background-color: orangered;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
background-color: yellowgreen;
transform: translateY(100px) rotateX(-90deg);
}
</style>