语法
@H_404_0@transform ： none | <transform-function> [ <transform-function> ]* @H_404_0@也就是：transform: rotate | scale | skew | translate |matrix; @H_404_0@none:表示不进么变换； @H_404_0@<transform-function>表示一个或多个变换函数，以空格分开； @H_404_0@换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
一、旋转rotate
@H_404_0@rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。 @H_404_0@如：transform:rotate(30deg): @H_404_0@
<div class="parent"> ="children"></div> </>
.parent{ width:600px; height:200px; background:#000; padding:100px 0; margin:0 auto; -webkit-perspective:800; } .children{ #e8eb10; -webkit-transform:rotateY(50deg); }
二、移动translate
@H_404_0@移动translate我们分为以下情况： @H_404_0@translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）； @H_404_0@translateX(x)仅水平方向移动（X轴移动）； @H_404_0@translateY(Y)仅垂直方向移动（Y轴移动）， @H_404_0@translateZ(z)： 定义 3D 转换，只是用 Z 轴的值。 @H_404_0@具体使用方法如下： @H_404_0@transform:translate(100px,20px): @H_404_0@
三、缩放scale
@H_404_0@缩放scale和移动translate是极其相似，他也具有以下情况： @H_404_0@scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）； @H_404_0@scaleX(x)元素仅水平方向缩放（X轴缩放）； @H_404_0@scaleY(y)元素仅垂直方向缩放（Y轴缩放），
@H_404_0@但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
@H_404_0@下面我们具体来看看这三种情况具体使用方法：
@H_404_0@transform:scale(2,1.5):
@H_404_0@
四、扭曲skew
@H_404_0@扭曲skew和translate、scale一样同样具有三种情况： @H_404_0@skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； @H_404_0@skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； @H_404_0@skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）， @H_404_0@具体使用如下： @H_404_0@transform:skew(30deg,10deg): @H_404_0@
五、矩阵matrix
@H_404_0@matrix(<number>,<number>,<number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。改变元素基点transform-origin
@H_404_0@他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。下面我们主要来看看其使用规则： @H_404_0@transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：- 1、top left | left top 等价于 0 0 | 0% 0%
- 2、top | top center | center top 等价于 50% 0
- 3、right top | top right 等价于 100% 0
- 4、left | left center | center left 等价于 0 50% | 0% 50%
- 5、center | center center 等价于 50% 50%（默认值）
- 6、right | right center | center right 等价于 100% 50%
- 7、bottom left | left bottom 等价于 0 100% | 0% 100%
- 8、bottom | bottom center | center bottom 等价于 50% 100%
- 9、bottom right | right bottom 等价于 100% 100%
-moz-transform-origin: x y; //Mozilla内核浏览器：firefox3.5+
-webkit-transform-origin: x y; //Webkit内核浏览器：Safari and Chrome
-o-transform-origin: x y ;//Opera
-ms-transform-origin: x y; //IE9
transform-origin: x y ;//W3C标准
//Mozilla内核浏览器：firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器：Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
transform综合表如下：
| 值 | 描述 | 测试 |
|---|---|---|
| none | 定义不进行转换。 | 测试 |
| matrix(n,n,n) | 定义 2D 转换，使用六个值的矩阵。 | 测试 |
| matrix3d(n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | |
| translate(x,y) | 定义 2D 转换。 | 测试 |
| translate3d(x,y,z) | 定义 3D 转换。 | |
| translateX(x) | 定义转换，只是用 X 轴的值。 | 测试 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 | 测试 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 | |
| scale(x,y) | 定义 2D 缩放转换。 | 测试 |
| scale3d(x,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | 测试 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | 测试 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | 测试 |
| rotate3d(x,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | 测试 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | 测试 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | 测试 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | 测试 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | 测试 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | 测试 |
| perspective(n) | 为 3D 转换元素定义透视视图。 | 测试 |