CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。

它带来了许多期待已久的新特性， 例如圆角、阴影、gradients(渐变) 、transitions(过渡)与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。

以上所说到的特性在这个专题中都不会说到！

那这个专题说什么？

我们来说说CSS3 3D的一些知识点。

重新认识transform

熟悉CSS3的都知道，transform的值可以为旋转rotate(X,Y,Z)，缩放scale(X,Y,Z)，平移translate(X,Y,Z)和斜切skew(X,Y)这些都很基础，不多赘述。

稍等深入一点,transform后面可以跟多个属性值。

平移和缩放

我们来看下对比效果：

可以看到，我对两个红色的div在hover的时候分别设置了

transform:translateX(100px) scale(.4)
和
transform: scale(.4) translateX(100px);

平移100px和同时缩放到原来的1/4，两个div的设置顺序不一要，直接导致了最终的结果的巨大差异。

下面来划重点：transform执行顺序！！！

transform 后面如果有多个属性值的话，那么后设置的属性要先执行

也就是说第一个红色的div先缩小到原来的1/4,然后再平移100px，得到最终的效果。

第二次黄色的div是先平移了100px然后再缩放到原来的1/4，注意：这平移过后再缩放会将平移的值也跟着缩放，所以黄色的小方块的最终平移要比小红块小。

平移和旋转

看效果：

我对两个方块分别设置了：

transform:translateX(100px) rotate(180deg)
和
transform: rotate(180deg) translateX(100px);

这是怎么回事？效果怎么反过来了？

我们知道，dom元素的旋转它是有一个旋转基点的（围绕哪个点旋转）默认的都是在dom元素的正中间

按照上面的分析，后写的先执行，我们来分析下

第一个小红块。先围绕自身的中心点旋转180度，然后向右平移100px，这个比较容易接受。

再来看小黄块。它是先向右平移了100px,然后旋转了180度。但是却向左平移了。好像与我们的预期不一样。

接下来我来解释一下原因：

这是因为transform的平移不会影响原来的旋转基点的位置？什么意思呢？当我先向右平移了100px后，我的旋转基点还在原来的位置，也就是在我们的黄色方块的左侧。然后我们再去做旋转的时候，是以之前左侧的点进行旋转的。所以旋转180度之后就绕到了旋转基点的左侧去了。

我拿gif来模拟一下这个过程吧。

一图胜千言

综上所述，我们可以得到两个结论：

1. transform设置多个值时候的执行顺序是：从后往前依次先执行
2. transform的translate属性不会影响元素的旋转基点。

第二点很重要，后面我们在制作复杂的3D的时候会用到这两个特性。

补充一句：如果想对旋转基点进行改变的话可以通过transform-origin:x ，y来设置 。具体细节我就不过多展开了。

下一知识点：

景深 perspective

要想dom在三维空间中变换，那么景深肯定是逃不过的话题。前面我在我的《前端图形学》的系列文章中有说到景深和相机的概念，那么应用到CSS3中依然实用。

我们可以把景深看作是我们的眼睛或者threejs中的透视相机，其特点就是近大远小。

比如我设置 perspective:300px;那么表示的是，我离屏幕300px的位置去观察dom元素。假如设置成500px,那么肯定要比300px的物体要显示的小。

举个栗子：

<div class='container'>
 <div id='box'></div>
 </div>

我们在父容器hover的时候，让里面的小盒子绕X轴翻转360deg，并且在父容器中设置了景深的样式为：800px

当我们再沿X轴旋转的时候，立体的感觉就出来了，这个应该比较简单了，这也是后面我们做复杂3D的基础。

总结：

1. transform的两大特性：执行顺序为后写先执行。平移不会影响元素的旋转基点
2. 景深的基本概念以及基本特点。

今天的基础内容就到这了，下一章节我们来实现复杂的3D几何体。敬请期待。