CSS3 2D 转换

CSS3 转换

通过 CSS3 伸。

？

果。

2D 或 3D

属性
transform

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

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 需要前缀 -ms-。

2D 转换

下 2D

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

章学习 3D 转换。

实例

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

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
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

值 rotate(30deg) 针旋转 30 度。

scale() 方法

通过 scale() 宽度（X （Y

实例

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	/* IE 9 */
-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
-o-transform: scale(2,4);	/* Opera */
-moz-transform: scale(2,4);	/* Firefox */
}

值 scale(2,4) 的 2 高度的 4 倍。

skew() 方法

通过 skew() 线（X 线（Y

实例

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 */
}

值 skew(30deg,20deg) 围绕 X 动 30 度，围绕 Y 轴转动 20 度。

matrix() 方法

matrix() 2D

matrix()

实例

如何使用 matrix 方法将 div 元素旋转 30 度：

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 */
}

性

：

属性 描述 CSS
transform 2D 或 3D 转换。 3
transform-origin 的位置。 3

2D Transform 方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 阵。
translate(x,y) 定义 2D X 和 Y 。
translateX(n) 定义 2D X 。
translateY(n) 定义 2D Y 。
scale(x,y) 定义 2D 。
scaleX(n) 定义 2D 宽度。
scaleY(n) 定义 2D 高度。
rotate(angle) 定义 2D 度。
skew(x-angle,y-angle) 定义 2D 沿着 X 和 Y 轴。
skewX(angle) 定义 2D 沿着 X 轴。
skewY(angle) 定义 2D 沿着 Y 轴。