纯css实现盒子3d旋转效果
纯css实现盒子 3D 旋转效果
平时看到动画下意识就觉得很难，出于畏惧心理老是不敢去碰，就像看到一个漂亮女生不敢上去搭讪，不过嘛， 再难得东西都是禁不住你死缠烂打的（追姑娘同理 哈哈哈。。）所以现在就从头理理，这个3d效果究竟是怎么实现的。预览效果
基础知识
首先，css里关于 3D 最基础的东西要拎出来认识一下 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换。其次是 perspective: 800px,元素距离视图的距离，以像素计。 也就是我们所说的能使容器具有透视效果的一个属性，值越大，它距离我们眼睛的距离就越近，反之同理。这两个属性结合，就可以呈现出 3D 效果。
这个栗子里核心的属性还有一个，是 transform:translate。
首先是 transform:translateX(),translateX是元素在X轴上的偏移，正值是向右，负值向左。
接着是 transform:translateY(),translateY是元素在Y轴上的偏移，想象一个原地旋转的芭蕾舞者， 偏移的角度即是舞者旋转的角度。正值是顺时针角度偏移，负值是逆时针角度偏移。
最后是 transform:translateZ(),translateZ是元素在Z轴上的偏移，参照z-index值，正值是离屏幕越近， 反之亦然。
根据 translateX Y Z值的不同，即可形成盒子各面。 本次栗子正是利用该属性，给前后左右各面加上不同值形成了以上效果。
核心代码
html
css
