css3转换（tranform）

本篇博客主要讲解CSS3转换，它包括2d转换，3d转换。

CSS3 2D转换

在部分中，您将学到如下 2D 转换方法：

• translate()
• rotate()
• scale()
• skew()

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
/*值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。*/
}

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div{
    tranform: rotate(30deg);/*值 rotate(30deg) 把元素顺时针旋转 30 度。*/
}

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div{
    transform: scale(2,4);;/*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。*/
}

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div{
    tranform: skew(30deg,20deg);/*值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。*/
}

CSS3 3D转换

在本章中，您将学到其中的一些 3D 转换方法：

• translate3d()
• rotate3d()
• scale3d()
• skew3d()
• matrix3d()

rotateX()方法

rotateX/Y/Z() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);	/* Firefox */
}

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);	/* Firefox */
}

总方法rotate3d(x,y,z,angle);参数不允许省略

其他3D属性略