几行CSS，让你的页面立体化返回稿收到了字节跳动的“米兰小铁匠”。几行CSS将使您的页面立体化。文章由浅入深，有示例代码可以借鉴。先看一个我们在产品中使用的简单例子：这种类似于翻牌的动画完全是通过CSS实现的，真正核心的部分只涉及三个简单的属性perspective、transform、backface-visibility，在下面的文章中部分，我会通过例子，一步步解释清楚。1.普通旋转众所周知，css3的transform属性可以对元素进行视觉上的变形操作，包括旋转操作（Rotate）：@keyframesrotateX{0%{transform:rotateX(0)}100%{transform:rotateX(360deg)}}@keyframesrotateY{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}@keyframesrotateZ{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.container{.z-rotateX{animation:rotateX10slinearinfinite;}.z-rotateY{动画：rotateY10s线性无限；}.z-rotateZ{动画：rotateZ10s线性无限；}}不掉帧的demo和源码可以看这里：https://codepen.io/mongooseso...下面是RotateX,RotateY,RotateZ旋转360°的动画效果，但是效果是只是平坦的，可能不容易理解。下面结合三维动态效果进行详细描述。2、三维旋转只是在效果上加了一行CSS：.container{perspective:800px;//......}不丢帧的demo和源码可以看这里：https://codepen.io/mongooseso......其实我们只加了perspective:800px这行代码。那么远景是什么意思呢？官方的解释是：perspective指定了观察者与z=0平面之间的距离，使得具有三维位置变换的元素产生透视效果。我们可以很简单的理解为屏幕视角到3D元素容器的距离。透视设置越小，感觉离屏幕上的3D越近，设置越大，感觉越远。当该属性存在时，表示该元素下的所有子元素都是三维的。默认情况下，元素的中心用作立足点。可以理解为你在看元素的中心。如果需要改变视角，可以使用perspective-origin属性。3、关于浏览器坐标系不得不问的一个问题是，RotateX、Y、Z是如何旋转的？在浏览器坐标系中，水平向右为X轴正向，垂直向下为Y轴正向，垂直向外为Z轴正向。例如transform:rotateX(45deg)表示旋转中心为X轴，顺时针旋转45度。如果参数为负数，则为逆时针旋转。识别时，我们可以使用左手定则，即左手大拇指指向对应轴的正方向，其他手指弯曲的方向为顺时针方向。为了方便理解，我找了两张图，表示我们的左手朝向X轴正方向，手指弯曲的方向朝向Y轴正方向。可以推断出旋转45度的效果是：友情提示：不要面对你我的同事和左手定则无关。如果做手势，一定不能用Y轴方向。如果您确实使用它，请告诉我医院的Wi-Fi有多好。所以上面动画中用到的RotateX、Y、Z就可以理解了，RotateZ不能产生3D效果的原因也就可以理解了。4.翻牌效果就像开头说的翻牌效果，是怎么实现的？上面说了透视是对子元素有效的，所以我们需要多一个卡片容器，两个div分别代表正面和背面。
