我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移……并且用起来几乎都得心应手。
但目前来说，3D效果的“高级”动画似乎更受欢迎一些，而且我们也确实需要。
这不，前两天笔者就在项目中给“翻转动画”增加了一个3D效果，看起来贼爽：
这个动画实现所用到的3D盒子模型是现在3D模型中最常用的一个 —— 不过我们先拿其中两个面分析：
首先，要实现这个功能，我们从外往里看：把文字所在部分看作一个盒子的话，前后两个横线并不属于这个盒子才对，那么，很自然就想到了—— 和 伪元素；其次，两个文字分别在两个div上，那么就需要有一个可以附带 的盒子 —— 不能加到上面的盒子中，因为after和before不属于div！最后是两个元素的翻转效果：我们需要知道的是，为了性能考虑，我们最好是对整个盒子进行翻转，而不是对两个文字div附加动画事实上，transform动画中的属性表示的含义更多的是“过渡多少”而不是“过渡到哪里”！
那么，这个层级关系就很明了了：
按照上面所说，我们很容易为它添加对应的CSS：
需要注意的是：3D效果是一定要有Z轴参与的！ 不然会显得很“尴尬”
有了简单的上下翻滚，我们还可以实现“跟随鼠标上下左右翻滚”动画，就是所谓的“鼠标从哪里进入盒子，盒子就往哪个方向翻转” —— 有两种实现方式：
在最外层盒子中加四个方向的i或span标签，用来判断鼠标从哪里进入，JS控制盒子做对应的rotateX/Y；借助数学库与“matrix”：
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery