首页手记 CSS3新特性(01)：Transform（上）

CSS3新特性(01)：Transform（上）

标签：

CSS3

CSS3中动画涉及到三个属性，一个是Transform：变形；一个是Transition：过渡，一个是Animation：动画。其中Transform、Animation可以搭配着使用，实现复杂动画，Transition可以实现简单动画。本文来介绍下Transform：

CSS3新特性中的Transform，作用是变形，即修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变形变换，元素可以实现在二维或三维的空间内的旋转、偏移、缩放和倾斜。

需要注意的是，虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。

一般我们所看到的网页布局，遵循的是坐标系统的概念，这就是说，浏览器在实地渲染和显示一个网页之前，都会先进行布局计算，得到网页中所有元素对应的坐标位置，一旦元素的坐标位置或尺寸信息发生改变，浏览器就会重新进行布局计算，这个重新计算的过程叫做回流（reflow），一般情况下，transform不会引发回流。

transform的值包含了一系列变换函数（transform function）,下面我们来详细介绍下这些函数，有旋转、偏移、缩放、倾斜。

transform的语法如下：

transform:none|<transform-function>+;

transform有两个值，一个是none；一个是transform-function。多个transform-function之间用空格隔开。

transform:rotate(180deg)  scale(1.2);

2D旋转：rotate()

（1）语法

transform:rotate(45deg);

单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，语法中的意思是顺时针旋转45°。

（2）实例

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）实例

2D偏移：translate()

（1）语法

transform：translate(sx,sy);

sx：向X轴方向偏移的数值。
sy：向Y轴方向偏移的数值。

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);参数表示移动距离，单位px。

一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

translate还可以分别写，translateX()，translateY()，分别给水平方向和垂直方向定义偏移距离。

（2）实例

3D偏移：translate3d()

（1）语法

transform:translate3d(tx,ty,tz);

其属性值取值说明如下：

tx：代表横向坐标位移向量的长度；
ty：代表纵向坐标位移向量的长度；
tz：代表Z轴位移向量的长度，此值不能是一个百分比值，如果取值为百分比值，将会无效。

translate3d可以拆分成三种写法，分别是translateX()、translateY()、translateZ()。

（2）实例

当z轴值越大时，元素离观看者越近，从视觉上元素就变得更大；反之其值越小时，元素离观看者越远，从视觉上元素就变得更小。

translateZ()函数在实际使用中等同于translate3d(0,0,tz)。仅从视觉效果上看，translateZ()和translate3d(0,0,tz)函数功能非常类似于二维空间的scale()缩放函数。

但实际上完全不同，translateZ()和translate3d(0,0,tz)变形是发生在Z轴上，而不是X轴和Y轴。当使用3D变形，能够在Z轴上移动一个元素确实有很大的好处，比如说在创建一个3D立方体的盒子时。

2D缩放：scale()

（1）语法

transform: scale(0.5);  或 transform: scale(0.5, 2);

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

（2）实例

scale还可以分别写，scaleX和scaleY，分别定义水平和垂直的缩放比例。

3D缩放：scale3d()

（1）语法

transform:scale3d(sx,sy,sz);

其取值说明如下：

sx：横向缩放比例；
sy：纵向缩放比例；
sz：Z轴缩放比例；

scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。scale3d可以拆分成三种写法，分别是scaleX()、scaleY()、ScaleZ()。

（2）实例

那么为什么scaleZ(5);没效果呢，因为这要搭配别的3D属性才能用。看下面的实例说明：

倾斜：skew()

（1）语法

transform: skew(30deg); 或 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg。

一个参数时：表示水平方向的倾斜角度；也就是Ｙ轴往Ｘ轴倾斜。
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。第二个参数也就是说Ｘ轴往Ｙ轴倾斜。

skew还可以分开写，skewX是Y轴往X轴倾斜，skewY是X轴往Y轴倾斜。

（2）实例

关于哪个轴向哪个轴倾斜理解起来比较费劲，多看看这个实例中画出来的虚线坐标轴情况吧。

综合实例

这个效果怎么实现呢，就用到多个transform-function了，比如偏移和旋转。但这两个function书写的顺序必须不能错。transform中的transform-function可以多个写，但书写顺序会影响最后的视觉呈现效果。

需要意识到变换函数的顺序。这是因为，每一个变换函数不仅改变了元素，同时也会改变和元素关联的transform坐标系，当变换函数依次执行时，后一个变换函数总是基于前一个变换后的新transform坐标系。

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变形，但无需添加浏览器私有属性。

后记：这是原文地址《CSS3新特性(01)：Transform（上）》，欢迎来我个人博客逛逛！

作者：荷小音
链接：https://www.jianshu.com/p/599f2fbc5a26

点击查看更多内容