CSS的变形对应的属性是transform，它的作用是修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变换，元素可以实现在二维或三维的空间内的平移、旋转和缩放。
需要注意的是，虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。
一般我们所看到的网页布局，遵循的是坐标系统的概念，这就是在说，浏览器在实地渲染和显示一个网页之前，都会先进行布局计算，得到网页中所有元素对应的坐标位置，一旦元素的坐标位置或者尺寸之类的信息发生了改变，浏览器就会重新进行布局计算，这个重新计算的过程就叫做回流（reflow）.一般情况下，transform不会引发回流。
transform的值包含了一系列变换函数（transform function）,下面我们来详细介绍下这些函数，有旋转、偏移、缩放、倾斜。
transform的语法如下：
transform:none|<transform-function>+；
transform有两个值，一个是none;一个是transform-function。多个transform-function之间用空格隔开。
<body style="transform:rotate(180deg) scale(1.2);">
（一）2D旋转：rotate()
（1）语法
transform:rotate(45deg)；
单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，语法中的意思是顺时针旋转45°。
（2）实例
rotate旋转实例
（二）2D偏移：translate
（1）语法
transform：translate(sx,sy);
- sx：向X轴方向偏移的数值。
- sy：向Y轴方向偏移的数值。
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);参数表示移动距离，单位px。
- 一个参数时：表示水平方向的移动距离；
- 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
translate还可以分别写，translateX()，translateY()，分别给水平方向和垂直方向定义偏移距离。
（2）实例
translate偏移实例
（三）2D缩放：scale
（1）语法
transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
- 一个参数时：表示水平和垂直同时缩放该倍率
- 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
（2）实例
scale缩放实例
scale还可以分别写，scaleX和scaleY，分别定义水平和垂直的缩放比例。
（四）倾斜：skew
（1）语法
transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg。
- 一个参数时：表示水平方向的倾斜角度；也就是Ｙ轴往Ｘ轴倾斜。
- 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。第二个参数也就是说Ｘ轴往Ｙ轴倾斜。
skew还可以分开写，skewX是Y轴往X轴倾斜，skewY是X轴往Y轴倾斜。
（2）实例
skew倾斜实例
关于哪个轴向哪个轴倾斜理解起来比较费劲，多看看这个实例中画出来的虚线的坐标轴的情况吧。
（五）综合实例
综合实例
这个效果怎么实现呢，就用到多个transform-function了，比如偏移和旋转。但是这两个function书写的顺序必须不能错。transform中的transform-function可以多个写，但是书写的顺序会影响最后的视觉呈现的效果。
需要意识到变换函数的顺序。这是因为，每一个变换函数不仅改变了元素，同时也会改变和元素关联的transform坐标系，当变换函数依次执行时，后一个变换函数总是基于前一个变换后的新transform坐标系。
综合实例解
（六）基准点transform-origin
在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。
（1）语法
transform-origin: x-axis y-axis z-axis;
共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
前两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。第三个参数只能设置具体的像素值。
| 值 | 描述 | 值写法 |
|---|---|---|
| x-axis | 定义视图被置于 X 轴的何处。 | left或center或right或length或% |
| y-axis | 定义视图被置于 Y 轴的何处。 | top或center或bottom或length或% |
| z-axis | 定义视图被置于 Z 轴的何处。 | length |
写法实例：
div{transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9
-webkit-transform: rotate(45deg); /*Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */}
当填一个值时，默认Y轴的值为50%，Z轴的值可以忽略不写。
transform的值包含了一系列变换函数（transform function）,其中一部分变换函数会产生三维变换，但是只是应用transform function是不能得到可用的三维变换效果的，还需要理解并使用其他和三维变换有关的CSS属性。
（七）透视属性：perspective
正确的三维效果，是建立在一定的透视变化的基础之上的。所谓透视变化，就是指以人眼看实际的景物时会有的“近大远小”的效果。此外，还有一个概念是灭点（vanishing point）。
透视灭点
当景物离自己的位置越远时，就会越趋于集中到某一个点上。这个点就是灭点，它对于建立三维效果是非常关键的。
现在再来考虑网页中的三维效果。请不要认为网页真的可以把元素排列在离屏幕前的你不同距离的位置(￣Д￣lll)。网页仍然只会显示在你眼前的屏幕上，其中的元素仍然位于同一平面。但是，元素会依照自己在虚拟三维空间中的位置，调整自己的位置和尺寸，从而创造出正确的三维效果。这个从虚拟三维空间转换到平面中的显示过程，也常称为投影。
perspective就是控制这个投影的参数。它表示的是假想的观察点到元素的绘制平面（也就是显示网页的平面）的距离，浏览器会根据这个距离值，以及元素的Z轴坐标，计算出用于投影缩放的比例。
下图中的d对应的就是perspective的值：
perspective-distance
这就是透视变化的“近大远小”的效果的原理。因此，要产生三维效果，必须要指定perspective。这个参数有两种指定方法
（1）语法
.aya{perspective:2000px;}//写法一
.aya{transform:webkit-perspective(2000px);}//写法二
2000px数值，代表人眼到透视物体的距离，值越大，透视越不明显，值越小，透视越明显。perspective的值必须为正数（也就是说，不包括0）。
这两种指定方法是很有区别的。当perspective作为transform
的一个变换函数使用时，也就是第二种写法时，透视变化只作用于应用了此变换的单一元素。而使用perspective属性的写法，也就是第一种写法时，则一般用在需要三维变换的多个元素的父元素上(这点要注意)，它会使对应元素的子元素共享同一个透视变化（包括灭点位置）。也就是说，第一种的这个写法的CSS要写在父元素上，但是作用在子元素上。此外，当使用perspective属性时，还可以使用perspective-origin属性修改透视变化中的灭点的位置（默认是中心点）。
perspective-origin
（2）实例
perspectiv实例
（3）浏览器支持
目前主流的浏览器都不支持 perspective 属性。需要使用浏览器私有前缀。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
（八）定义透视变化中的灭点的位置：perspective-origin
（1）语法
perspective-origin: x-axis y-axis;
| 值 | 描述 | 值写法 |
|---|---|---|
| x-axis | 定义视图在 X 轴上的位置。 | left或center或right或length或% |
| y-axis | 定义视图在 Y 轴上的位置。 | top或center或bottom或length或% |
（2）实例
perspective-origin实例
其中当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。所以要为元素定义perspective-origin属性时，要在其父元素上定义该属性。该属性必须与perspective属性一同使用，perspective也要定义在父元素上，而且只影响 3D 转换元素。另外，不管是perspective还是perspective-origin都要设置浏览器的私有前缀，比如-webkit-perspective；以及-webkit-perspective-origin。
（4）浏览器支持
目前主流浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
三维变换使用基于二维变换的相同属性，如果你熟悉了二维变换，会发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：
- 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
- 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
- 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
- 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
(九)3D位移：translate3d()
（1）语法
transform:translate3d(tx,ty,tz);
其属性值取值说明如下：
- tx：代表横向坐标位移向量的长度；
- ty：代表纵向坐标位移向量的长度；
- tz：代表Z轴位移向量的长度，此值不能是一个百分比值，如果取值为百分比值，将会无效。
translate3d可以拆分成三种写法，分别是translateX()、translateY()、translateZ()。
（2）实例
translate3d
当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。
translateZ()函数在实际使用中等同于translate3d(0,0,tz)。仅从视觉效果上看，translateZ()和translate3d(0,0,tz)函数功能非常类似于二维空间的scale()缩放函数，但实际上完全不同。translateZ()和translate3d(0,0,tz)变形是发生在Z轴上，而不是X轴和Y轴。当使用3D变形，能够在一Z轴上移动一个元素确实有很大的好处，比如说在创建一个3D立方体的盒子之时。
（十）3D缩放：scale3d()
（1）语法
transform:scale3d(sx,sy,sz);
其取值说明如下：
- sx：横向缩放比例；
- sy：纵向缩放比例；
- sz：Z轴缩放比例；
scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。
scale3d可以拆分成三种写法，分别是scaleX()、scaleY()、ScaleZ()。
（2）实例
scale3d实例
那么为什么scaleZ(5);没效果呢，因为这要搭配别的3D属性才能用。看下面的实例说明：
scaleZ的用法
（十一）3D旋转:rotate3d()
（1）语法
transform:rotate3d(x,y,z,a)
rotate3d()中取值说明：
-
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
-
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
-
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
rotate3d可以分别写成三个旋转函数，功能等同：
- rotateX(a)函数功能等同于rotate3d(1,0,0,a)
- rotateY(a)函数功能等同于rotate3d(0,1,0,a)
- rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
（2）实例
rotate3d实例
CSS3 3D变形兼容性
3D变形在实际使用中同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的支持：
- IE10+中3D变形部分属性未得到很好的支持；
- Firefox10.0至Firefox15.0版本的浏览器，在使用3D变形时需要添加私有属性-moz-，但从Firefox16.0+版本开始无需添加浏览器私有属性；
- Chrome12.0+版本中使用3D变形时需要添加私有属性-webkit-；
- Safari4.0+版本中使用3D变形时需要添加私有属性-webkit-；
- Opera15.0+版本才开始支持3D变形，使用之里需要添加私有属性-webkit-；
- 移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D变形，但在使用时需要添加私有属性-webkit-；Firefox for Android19.0+支持3D变形，但无需添加浏览器私有属性。
（十二）transform-style
该属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。
（1）语法
transform-style: flat | preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d
表示所有子元素在3D空间中呈现。
也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d
，它表示不执行平展操作，他的所有子元素位于3D空间中。transform-style
属性需要设置在父元素中，并且高于任何嵌套的变形元素。
（2）实例
transform-style实例
（十三）定义3D的背面可见与否：backface-visibility
（1）语法
backface-visibility:visible|hidden;
（2）实例
backface-visibility实例
网友评论