你所不知道的 CSS 动画技巧与细节

怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。

废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。

正负旋转相消

嗯。名字起的很奇怪，好像数学概念一样。

在动画中，旋转是非常常用的属性，

那旋转有一些什么高级点的技巧呢？当然是可以改变 transfrom-origin ，改变旋转中心点啦。

开个玩笑，改变旋转中心点这个估计大家都知道了，这里要介绍的技巧是利用父级元素正反两个方向的旋转，来制作一些酷炫的 3d 效果。

首先假设一下场景，我们有这样的一层 HTML 结构：

样式如下：

.content 内是我们的主要内容，好了，现在想象一下，如果祖先元素 .rotate 进行正向 linear 360° 旋转，父级元素 .reverseRotate 进行反向 linear 360° 旋转，效果回是啥样？

CSS 代码如下：

神奇！因为一正一反的旋转，且缓动函数一样，所以整个 content 看上去依然是静止的！注意，这里整个 content 静止的非常重要。

有读者看到这里就要骂街了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？

别急！虽然看上去是静止的，但是其实祖先两个元素都是在旋转的！这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的：

既然如此，我们继续思考，如果我在其中旋转的一个祖先元素上，添加一些别的动画会是什么效果？想想就很刺激啊。

为了和文案里面的 3D 动画扯上关系，我们先给这几个元素添加 3D 转换：

接着，尝试修改上面的旋转动画，在内层旋转上额外添加一个 rotateX：