重新想，重新看——CSS3变形，过渡与动画②

本篇文章主要用来归纳总结CSS3变形属性。

CSS3变形属性大致可以分为以下三个部分：

1. 变形控制属性
2. 2D变形函数
3. 3D变形函数

下面将对其一一进行分析：

1.变形控制属性

所谓的变形控制属性主要指“不直接作用元素变形，但影响元素变形函数函数或元素最终视觉效果的属性”。主要有以下四个：

• transform-origin属性
• transform-style属性
• perspective属性
• backface-visibility属性

下面逐一分析这四个属性。

（1）transform-origin属性

transform-origin属性用于指定元素中心点的位置。由于在默认情况下，元素变形的原点为元素的中心点，因此改变中心点的位置，元素变形所得到的最终效果也会大不相同。同时值得一提的是，通常在元素定位时，以元素左上角为坐标原点进行定位，在这种情况下，元素的位置实际上与元素的大小无关（我们只需考虑元素位置的偏移量）。而变形以元素中心点为原点的这一特性则使元素定位增加了另一种情况，即在定位需考虑到元素自身大小时，通过相对自身位置进行定位。这种“相对定位”，位移有了一个新的尺度，元素自身的宽高。

transform-origin属性接受关键字，百分比数，长度单位值三种类型的参数，使用方式如下：

 transform-origin : 50% 50%;
 transform-origin : top center;

实际上，通过在每一次元素变形前指定元素变形的中心点位置，可以极大的丰富元素变形效果。

（2）transform-style属性

transform-style属性用于为元素创建一个2d或3d的显示环境，即transform-style的两个属性flat和preserve-3d像一个开关一样，控制着元素的空间展示效果，在flat模式下，元素的3d变形都无法展现出立体效果。

（3）perspective属性

这个属性讲解起来略微有些复杂，它实际上向浏览器声明了"观看者"与z轴原点的距离，我们知道“近大远小”的道理，两个物品一前一后相差5米的排列，站在近处和站在远处所感受到的距离感是截然不同的，在2d平面要展示3d空间的效果，画家们发明了'透视法'，而我们则需要借此设置一个"透视值"即告诉浏览器你此刻需要的透视效果有多强（即景深有多明显）。说清这回事又是一个稍微复杂的事，直接上图吧：

这里是两张perspective值为1000px/600px，z轴偏移-200px的效果图。

这里是两张perspective值为1000px/600px，z轴偏移200px的效果图。

这下一目了然了的是，可以看出perspective这个属性值设置的越小，则z轴的偏移程度就越明显。

值得一提的是，在容器中使用perspective属性，会自动开启transform-style:preserve-3d声明，实在是十分方便。

perspective属性取值只能为长度值或none，但不支持百分比。

你以为这就结束了？并没有，与perspective相关的还有以下两个属性：

perspective()函数与perspective-origin属性。

下面简单提一下：perspective()函数在功能上类似于perspective属性，但是在以下几个方面有明显不同：

① 使用时机：perspective()函数需使用在变形函数transform属性内，perspective属性需放入变性元素父元素中独立使用;

②参数/值不同：perspective()函数知道能使用大于0的值，而perspective属性可取任意长度值;

③使用目的：perspective()函数用于针对变形元素自身调整视距，而perspective属性针对父元素3d环境调整整体视距;

④是否自动开启3D环境：否，是。

接着是perspective-origin属性，决定了视点的位置，默认为50%，50%。该属性必须在3d环境盒子上并配合perspective属性一同使用。

（4）backface-visibility属性

当我们知道元素可以沿着Y轴旋转180度时，是否好奇元素的背面是什么？做个小实验就可以知道，元素盒子好比一张透明的幻灯片，翻转180度后，字体会倒转显示。因此如果我们不希望看到元素的背面，这里提供了一个属性来做到这点。

backface-visibility属性只有两个值：visible（默认）和hidden。分别控制着元素的背面是否可见，有意思的是，当其值设置为hidden时，元素翻转180度后实际上整体都被隐藏起来了。

2.2D变形函数

元素在2D空间内的变形，主要涉及以下三个方面：位置（位移和旋转），大小，倾斜。

下面一一介绍对应的变形函数：

（1）改变元素的位置（2d）

（1.1）改变元素的绝对位置　　translate(tx,ty)

很容以理解，为选中元素加上"transform:translate(0,100px)"的声明，即可将元素向下平移100个像素的位置。

需要特别说明的是，对于网页中的元素而言，坐标轴的设置和我们平时数学中使用的坐标轴是不同的，网页中使用的坐标轴方向如下图：

是以“右边”为x轴为正方向，以“下边”为y轴的正方向的。

因此，translate函数的两个参数分别设定了元素向右方与下方位移的偏移量。从效果上来看，这个函数略像"position:relative"的声明，但是不同之处在于，元素利用函数位移时默认以元素中心点为移动起始点，因此对于需要参照元素自身尺寸移动的场合而言，特别有用。

位移函数接受参数的单位有：px，em，%。

另外，为了方便起见，这个函数还提供了对x轴和y轴位移的具体控制：translateX()，translateY()。

（1.2）改变元素的相对位置 　　rotate(a)

旋转是改变元素相对位置的函数，只接受一个值，即旋转的角度值，其值可正可负。正值为沿中心顺时针旋转，因为较为简单，再次不再赘述。

（2）改变元素的大小（2d）　　scale(sx,sy)

缩放函数可以让元素根据中心圆点进行放大或缩小，默认值为1。因此任何0.01到0.99的值会使元素缩小，任何大于1.01的值都会使元素放大。

像位移函数一样，缩放函数接收的两个参数分别控制着x轴方向，与y轴方向的放大/缩小倍数，如果只给scale函数一个参数，则另一个参数的值会默认与第一个参数的值相等。

有意思的是，scale函数的参数还可以接受负值，当接受到负值时，元素会先进行翻转，在进行相应的放大或缩小。翻转的效果就像是将元素沿中心旋转180度一样。

同样的，缩放函数还提供了对x轴和y轴缩放的具体控制：scaleX()，scaleY()。

（3） 改变元素的形状（2d）　　skew(ax,ay)

css3中对元素形状的改变由倾斜函数来实现，其参数的效果也是一般最令人迷惑的部分，在这里将详细讲解一下：

skew函数接受一个或两个参数值，如果未显式设置某个值，则其值默认为0。函数参数值的单位为角度（deg），第一个值表示将元素以中心为原点，在x轴倾斜多少角度，第二个值可以此类推。

比较让人难以理解的地方在于对倾斜效果的困惑，不明白如何通过参数值控制元素的变形。但实际上这是一个数学上的问题，下面这张图可以帮助很好的理解这一函数：

图上可以看到这里浅灰色的元素是设置了skew(30deg)后的效果，深灰色的部分则是元素原来的形状。根据定义，第一个参数值意味着将元素沿中点向x轴偏移的角度。即y轴向x轴偏移30度，这里需要再次提及网页中坐标系与数学中的不同，因此图像x轴方向的边长度保持不变，y轴方向的边向左倾斜了30度。

搞清楚原理之后，就可以进行如下的简单记忆了：函数参数的x值使y轴方向倾斜，正值使边逆时针倾斜，负值使边顺时针倾斜。

至此，skew函数就讲解清楚了，额外一提的是skew函数也有只针对x轴和y轴写法：skewX()，skewY()。

最后需要注意的是，css3中2d变形函数IE8及以下不兼容，并且IE9使用时需要添加-ms-私有属性，Chrome和Safari需要添加-webkit-私有属性（？）。

3.3D变形函数

相较于2D空间，元素在3D空间多出了深度这一位置属性，并在css中用z轴表示出来。因此相较于2D变形函数而言，最需要注意的便是深度属性出现后，给元素变形带来的改变，由于其声明在原理效果上都与2D环境下无太大分别，因此在这里也不做格外的说明。

除此之外，还需要特别留意的是，如果要使用3D变形函数，一定要确保目标元素的父级元素设置了transform-style: preserve-3d这一属性，并且设置了合适的perspective值，否则在元素上设置的关于深度的属性是无法显示应有的效果的。下面我们具体谈谈css3的3D变形函数：

关于3D变形的浏览器支持如下：IE10+中的3D变形部分属性未得到很好的支持，chrome，safari和opera使用时需要添加私有属性-webkit-。