怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。
废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。
正负旋转相消
嗯。名字起的很奇怪，好像数学概念一样。
在动画中，旋转是非常常用的属性，
{
transform: rotate(90deg);
}那旋转有一些什么高级点的技巧呢？当然是可以改变
transfrom-origin ，改变旋转中心点啦。开个玩笑，改变旋转中心点这个估计大家都知道了，这里要介绍的技巧是利用父级元素正反两个方向的旋转，来制作一些酷炫的 3d 效果。
首先假设一下场景，我们有这样的一层 HTML 结构：
<div class="reverseRotate">
<div class="rotate">
<div class="content">正负旋转相消3D动画</div>
</div>
</div>样式如下：
.content 内是我们的主要内容，好了，现在想象一下，如果祖先元素
.rotate 进行正向 linear 360° 旋转，父级元素
.reverseRotate 进行反向 linear 360° 旋转，效果回是啥样？CSS 代码如下：
.rotate {
animation: rotate 5s linear infinite;
}
.reverseRotate {
animation: reverseRotate 5s linear infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes reverseRotate {
100% {
transform: rotate(-360deg);
}
}神奇！因为一正一反的旋转，且缓动函数一样，所以整个
content 看上去依然是静止的！注意，这里整个
content 静止的非常重要。有读者看到这里就要骂街了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？
别急！虽然看上去是静止的，但是其实祖先两个元素都是在旋转的！这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的：
既然如此，我们继续思考，如果我在其中旋转的一个祖先元素上，添加一些别的动画会是什么效果？想想就很刺激啊。
为了和文案里面的 3D 动画扯上关系，我们先给这几个元素添加 3D 转换：
