在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？

多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。

在2011年05月在站上发表了第一篇有关于CSS3 Transform教程，现已时隔近两年，有很多东西都有变化，而且理解也略有不同，接下来将会分几篇教程，向大家介绍CSS3 Transform相关的知识。

CSS3变形的介绍

2012年9月，W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D 或3D空间，这个草案包括了CSS3 2D变形和CSS3 3D变形。

CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则无需加载这些额外的文件，再一次提升了你的开发效率，还提高了页面的执行效率。

CSS变形允许您动态的控制元素。您可以在屏幕周围移动它们，缩小或扩大，旋转，或结合所有这些产生复杂的动画效果。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。在本章中，首先介绍简单的2D变形，然后向您展示如何扩展转换成3D变形。

• CSS3的transform属性指一组转换函数。
• CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。
• translate()函数接受CSS的标准度量单位；scale()函数接受一个十进制值数值；rotate()和skew()两个函数都接受一个径向的度量单位值deg。除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。
• CSS3变形中具有X /Y可用的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
• 2D变形中还有一个矩阵matrix()函数，其包括六个参数。
• CSS3 3D变形包括函数有：rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。
• CSS3 3D变形中也包括一个矩阵matrix3d()函数，其包括16个参数。
• transform-origin属性指定元素的中心点在哪。后面增加了第三个数transform-origin-z，控制元素三维空间中心点。
• perspective属性相对于观众产生一个3D场景，你看3D物体，眼睛到画布的距离。正确的用法是他需要应用到变形元素的祖先元素上。
• perspective-origin为视点的位置。
• backface-visibilty属性用来设置背面的可见性。
• 设置transform-style的值为preserve-3d值，建立一个3D渲染环境。

transform属性

CSS3的变形（transform）属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。transform属性的基本语法如下：

transform：none | <transform-function> [<transform-function>]*

transform属性可用于内联元素和块元素。其默认值为none，表示不元素不进行变形。transform另一个属性值是一系列的<transform-function>。<transform-function>表示一个或多个变形函数，以空格分开；换句话说就是我们同时对一个元素进行变形的多种属性操作，例如rotate、scale、translate等。但这里需要提醒大家，以往我们叠加效果都是用逗号(“，”)隔开，但在transform中使用多个transform-function时却需要有空格隔开。

transform属性3D变形（3D transform）模块的一部分，也就是说所有的2D变形函数也包含于3D变形规范中。如此一来，CSS3变形中的函数根据不同的规范略有不同，下面列出的是变形中的2D和3D常用变形函数的功能，简单说明如下：

2D transform常用的transform-function的功能:

• translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。
• scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。
• rotate()：用来旋转元素。
• skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。
• matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

• translate3d()：移元素元素，用来指定一个3D变形移动位移量
• translate()：指定3Ｄ位移在Ｚ轴的位移量。
• scale3d()：用来缩放一个元素。
• scaleZ():指定Z轴的缩放向量。
• rotate3d()：指定元素具有一个三维旋转的角度。
• rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。