警告！本期内容建议CSS基础良好的人看，本期为实战篇，难度有点大
大家好。我是wawjf。
我经常很抱歉我们已经嘀嘀咕咕了快两周了。主要是我们几个作者(加上我两个)去夏令营学重要的东西了，没时间更新。在这里，我想对所有劝你看的朋友说一声对不起。
(放一张照片表明你的感受)
如果我的猜测没错的话，这一期应该是官方的最后一期，然后有时间的时候可能会有一篇国外的文章，但是不太规律。
本期我们就来讲一个很重要的内容：——3D变形(动画)实战。
1题干
我们要做一个3D变形(动画)的立方体，然后设计成光标经过时沿着Y轴旋转，像这样：
2思路
首先，我们来梳理一下这个动画的制作过程。这里我给你整理了一下：
第一步，先设计盒子。
第二步，我们需要对盒子进行一些样式调整和变形(动画)安排。
第三步，我们需要定义关键帧。
第四步：定义动画的触发方式。
注意：在这个过程中，你可能会看到一些你从未遇到过的属性。不用担心，因为这些房产比较冷门，所以我们就不作为重点来教了。你只需要了解他们。
3实践
让我们先写基本代码：
！文档类型html html头/头体/正文/html
r />
3.1盒子的设计
<div class="stage"><div class="container"><div class="side front">前面</div><div class="side back">背面</div><div class="side left">左面</div><div class="side right">右面</div><div class="side top">顶面</div><div class="side bottom">底面</div></div></div>
这个比较好理解，首先我们先用一个大容器stage来定义立方体，然后再定义每一面，并取名
3.2样式安排
这个比较复杂，我们区分讲
3.2.1定义画布
.stage {width: 300px;height: 300px;margin: 15px auto;position: relative;perspective: 300px;}
这里表示创建一个高300px（height），宽300px（width）的一个画布，其中有一个属性我们可能没讲过，那就是perspective，这个属性用来设置视图的距离（其实一点用处都没有）
3.2.2定义盒子的亿些样式
.container {top: 50%;left: 50%;margin: -100px 0 0 -100px;position: absolute;transform: translateZ(-100px);transform-style: preserve-3d;}
这个用来定义盒子包含框的样式，transform-style表示元素的呈现形式，默认就是preserve-3d，表示在3D中呈现（没用*2）
.side {background: rgba(255,0,0,0.3);border: 1px solid red;font-size: 60px;font-weight: bold;color: #fff;height: 196px;line-height: 196px;position: absolute;text-align: center;text-shadow: 0 -1px 0 rgba(0,0,0,0.2);text-transform: uppercase;width: 196px;}
这个用来定义盒子六面的基本样式，应该没有我们没讲过的，不知道rgba的请自行网上搜索
.front {transform: translateZ(100px);}.back {transform: rotateX(180deg) translateZ(100px);}.left {transform: rotateY(-90deg) translateZ(100px);}.right {transform: rotateY(90deg) translateZ(100px);}.top {transform: rotateX(90deg) translateZ(100px);}.bottom {transform: rotateX(-90deg) translateZ(100px);}
3.3定义动画关键帧
@keyframes spin {0% {transform:rotateY(0deg)}100% {transform:rotateY(360deg)}}
这个也比较好理解，看过上期的就知道，这里我们定义了一个名叫spin的关键帧，在动画的开头以Y轴为准旋转0度，在结尾旋转360度，其实就是一个补间动画
3.4定义动画触发方式
.container:hover {animation: spin 5s linear infinite;}
这里我们运用了hover选择器，表示当鼠标的位置在元素上的时候，触发的动作
animation的函数我们也讲过了，就是引用我们上面定义的spin函数，然后对时间，动画运动等参数进行设定，不懂的看前面
————
没错，我们的代码写完了
完整代码如下————
<!doctype html><html><head><meta charset="utf-8"><style type="text/css">@keyframes spin {0% {transform:rotateY(0deg)}100% {transform:rotateY(360deg)}}.stage {width: 300px;height: 300px;margin: 15px auto;position: relative;perspective: 300px;}.container {top: 50%;left: 50%;margin: -100px 0 0 -100px;position: absolute;transform: translateZ(-100px);transform-style: preserve-3d;}.container:hover {animation: spin 5s linear infinite;}.side {background: rgba(255,0,0,0.3);border: 1px solid red;font-size: 60px;font-weight: bold;color: #fff;height: 196px;line-height: 196px;position: absolute;text-align: center;text-shadow: 0 -1px 0 rgba(0,0,0,0.2);text-transform: uppercase;width: 196px;}.front {transform: translateZ(100px);}.back {transform: rotateX(180deg) translateZ(100px);}.left {transform: rotateY(-90deg) translateZ(100px);}.right {transform: rotateY(90deg) translateZ(100px);}.top {transform: rotateX(90deg) translateZ(100px);}.bottom {transform: rotateX(-90deg) translateZ(100px);}</style><title></title></head><body><div class="stage"><div class="container"><div class="side front">前面</div><div class="side back">背面</div><div class="side left">左面</div><div class="side right">右面</div><div class="side top">顶面</div><div class="side bottom">底面</div></div></div></body></html>
没错，那么这样我们的动画就可以实现啦~
如果你没听懂或者出了问题，可以私信公众号哦，我们看到就会尽快回复的
好啦，那么我们的CSS教程差不多就要告一段落了，接下来我可能会开始教JQuery或者帮阿列克谢写JS，或者写C++……反正我能写的我都会尽量安排啦，各位尽情期待哦
作者：
wawjf
（我爱微积分）
四五工作室副室长（嗯，我也是）
四五议会 45-2（没想到我是45-2吧）
喜欢研究理科类东西
08年出生，福建福州人，未来的█████
自学微积分，低调低调
本来想研究算法，结果在这边写稿屯图片
关注四五工作室，从零开始学WEB
