CSS3 2 2D 3D转换

CSS3 2 2D 3D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

转换是使元素改变形状、尺寸和位置的一种效果，使用 2D或 3D 转换来转换元素。

1浏览器支持

Internet Explorer 10、Firefox、Opera支持 transform属性。

Internet Explorer 9 支持替代的 -ms-transform属性（仅适用于 2D转换）。

Safari 和 Chrome支持替代的 -webkit-transform属性（3D和 2D转换）。

Opera 只支持 2D转换。

2 transform 属性

向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,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,y,z)	定义 3D 缩放。
scaleX(x)	通过设置 X 轴的值来定义缩放。
scaleY(y)	通过设置 Y 轴的值来定义缩放。
scaleZ(z)	通过设置 Z 轴的值来定义3D 缩放。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,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 转换元素定义透视视图。

3 2D转换

①translate() 位移

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

div#div2 {
transform:translate(50px,50px);
-ms-transform:translate(50px,50px); /* IE 9 */
-moz-transform:translate(50px,50px); /* Firefox */
-webkit-transform:translate(50px,50px); /* Safari and Chrome */
-o-transform:translate(50px,50px); /* Opera */
}
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>

 

②rotate() 旋转

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

div#div2 {
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}

 

③scale() 缩放

通过 scale() 方法，对元素的尺寸进行缩放，根据给定的宽度（X轴）和高度（Y轴）参数：值 scale(2,4)把宽度转换为原始尺寸的 2倍，把高度转换为原始高度的 4倍。

div#div2 {
margin:100px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}

 

④skew() 倾斜

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数：值 skew(30deg,20deg)围绕 X轴把元素翻转 30度，围绕 Y轴翻转 20度。

div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	/* IE 9 */
-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
-o-transform: skew(30deg,20deg);	/* Opera */
-moz-transform: skew(30deg,20deg);	/* Firefox */
}

 

⑤matrix() 矩阵

matrix() 方法把所有 2D转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

div {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Opera */
}

具体参见：理解CSS3 transform中的Matrix(矩阵)

4 3D转换

①rotateX() 方法

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

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

 

②rotateY() 旋转

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

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

 

5 transform-origin 属性

transform-origin 属性允许您改变被转换元素的基点位置

语法

transform-origin: x-axis y-axis z-axis; //默认值50% 50% 0

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left | center | right | length | %
y-axis	定义视图被置于 Y 轴的何处。可能的值： top | center | bottom | length | %
z-axis	定义视图被置于 Z 轴的何处。可能的值： llength

div {
transform : rotate(45deg) ;
transform-origin : left top ;
 
-ms-transform : rotate(45deg) ; /* IE 9 */
-ms-transform-origin : left top ; /* IE 9 */
 
-webkit-transform : rotate(45deg) ;	/* Safari 和 Chrome */
-webkit-transform-origin : left top ;	/* Safari 和 Chrome */
 
-moz-transform : rotate(45deg) ;	/* Firefox */
-moz-transform-origin : left top ;	/* Firefox */
 
-o-transform : rotate(45deg) ;	/* Opera */
-o-transform-origin : left top ;	/* Opera */
}

 

6 其他

transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。