啊，我回来了。
让我告诉你，我们已经为45工作室的作者团队增加了另一名成员，他们将在周五
宣布
今天要说的是最NB的一件事，——3D变形！
今天只告诉你一件事：3D版的translate。
放好表格(请准备好)
TranslateX指定对象x轴的平移(水平方向)translateY指定对象y轴的平移(垂直方向)translateZ指定对象z轴的平移translate3D指定对象的3D平移，也就是说， 以上三者的综合scaleX指定对象x轴(水平方向)的缩放比例ScaleY指定对象y轴(水平方向)的缩放比例scaleZ指定对象z轴(水平方向)的缩放比例scale3D指定对象的3D缩放比例，即以上三者的综合rotateX指定对象x轴的旋转角度rotateY指定对象y轴的旋转角度。
d>
看到这里，你可能已经想退出了
不过你会发现，这些参数都是我们2D变形中讲到的几个参数的变形版
而变形的部分相当于是给每个部分添加了x,y,z,3D的属性，为什么要这样？因为我们要判断的不是x和y轴的变化，而是xyz三个轴的变化
我们重点的来讲一讲带3D后缀的三个属性吧
1）translate3D
translate3D有三个参数，分别是（x,y,z），即对象在三个轴的平移情况，三个参数缺一不可哦
2）scale3D
和1）一样也是三个参数，反正很简单就对了
3）rotate3D
和1）一样的，也有那三个参数，但是！rotate3D有4个参数！最后一个是什么呢？是旋转的角度，那前面三个参数表示什么呢？旋转的方向
没错，真的很神奇
如果不懂可以去网上查~
嗯，这次我们会重点的讲一讲实战部分，上代码：
<!DOCTYPE html><html><head><style>div{width:100px;height:75px;background-color:yellow;border:1px solid black;}div:hover{transform:rotateX(120deg);}</style></head><body><div>你好。这是一个div元素</div></body></html>
效果如下：
我们来分析一下代码：
首先我们用到了标签选择器，用div进行定位；
然后这一个部分是做初始化：
div{width:100px;height:75px;background-color:yellow;border:1px solid black;}
表示生成一个宽为100px；高为75px；背景颜色为黄色；边框为1px粗的黑色边框的一个长方形
然后我们运用到了:hover选择器，还记得它是用来干嘛的吗？没错，:hover选择器下的内容表示鼠标指针移到对象上方时，所做出的变化，一般情况下，和变形，动画搭配使用
div:hover{transform:rotateX(120deg);}
变形的内容就是将对象以x轴为轴，旋转120°
啊？你问我为什么没有过渡的动画？
注意，这是变形！而不是动画
3D动画的教程我们将会在下一期展示
对了，CSS的教程也即将结束了，我现在在想一件事，要不要出几期专门介绍网页排版模式以及高级选择器的内容呢？可以在下方投票哦
有问题可以私信公众号哦，我们下期再见
作者：
wawjf
（我爱微积分）
四五工作室副室长（嗯，我也是）
喜欢研究理科类东西
08年出生，福建福州人，未来的█████
自学微积分，低调低调
本来想研究算法，结果在这边写稿屯图片
关注四五工作室，从零开始学WEB
如果想看到往期教程，点击下方菜单就好了啦~
HTML教程：输入HTML或者菜单点击；
CSS教程：输入CSS或者菜单点击；
JS教程：输入JS或者菜单点击；
网页每期一题：输入每期一题或菜单点击；
C++教程：菜单点击；
Pr教程：输入Pr或者菜单点击
如果输入错误不会得到回复哦~
我们下期再见~
