CSS 2D变换

CSS转换

CSS变换允许您平移，旋转，缩放和倾斜元素。变换是一种让元素改变形状，大小和位置的效果。CSS支持2D和3D转换。

2D变换浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	Internet Explorer	Chrome	FireFox	Safari	Opera
属性格式
transform	10.0 9.0-ms-	36.0 4.0-webkit-	16.0 3.5-moz-	9.0 3.2-webkit-	23.0 15.0-webkit- 12.1 10.5-o-
transform-origin (两个值的语法)	10.0 9.0-ms-	36.0 4.0-webkit-	16.0 3.5-moz-	9.0 3.2-webkit-	23.0 15.0-webkit- 12.1 10.5-o-

在本章中，您将了解以下2D转换方法：

translate()
rotate()
scale()
skewX()
skewY()
matrix()

提示：您将在下一章中了解3D变换。

translate()方法

translate()方法从其当前位置移动元素（根据为X轴和Y轴给出的参数）。以下示例将<div>元素从当前位置向右移动50个像素，向下移动100个像素：

div {
     -ms-transform: translate(50px, 100px); /* IE 9 */
     -webkit-transform: translate(50px, 100px); /* Safari */
     transform: translate(50px, 100px);
   }

尝试一下

rotate()方法

rotate()方法根据给定的程度顺时针或逆时针旋转元件。以下示例以20度顺时针旋转<div>元素：

div {
     -ms-transform: rotate(20deg); /* IE 9 */
     -webkit-transform: rotate(20deg); /* Safari */
     transform: rotate(20deg);
   }

尝试一下

使用负值将逆时针旋转元素。以下示例逆时针旋转<div>元素20度：

div {
     -ms-transform: rotate(-20deg); /* IE 9 */
     -webkit-transform: rotate(-20deg); /* Safari */
     transform: rotate(-20deg);
   }

尝试一下

scale()方法

scale()方法增加或减少元素的大小（根据给定的宽度和高度的参数）。下面的示例将<div>元素增加到其原始宽度的两倍，并且是原始高度的三倍：

div {
     -ms-transform: scale(2, 3); /* IE 9 */
     -webkit-transform: scale(2, 3); /* Safari */
     transform: scale(2, 3);
   }

尝试一下

以下示例将<div>元素减少为其原始宽度和高度的一半：

div {
     -ms-transform: scale(0.5, 0.5); /* IE 9 */
     -webkit-transform: scale(0.5, 0.5); /* Safari */
     transform: scale(0.5, 0.5);
   }

尝试一下

skewX()方法

skewX()方法沿X轴倾斜给定角度的元素。以下示例将<div>元素沿X轴倾斜20度：

div {
     -ms-transform: skewX(20deg); /* IE 9 */
     -webkit-transform: skewX(20deg); /* Safari */
     transform: skewX(20deg);
   }

尝试一下

skewY()方法

skewY()方法使元素沿Y轴倾斜给定角度。以下示例将<div>元素沿Y轴倾斜20度：

div {
     -ms-transform: skewY(20deg); /* IE 9 */
     -webkit-transform: skewY(20deg); /* Safari */
     transform: skewY(20deg);
   }

尝试一下

skew()方法

skew()方法沿着X和Y轴倾斜元素给定的角度。以下示例将<div>元素沿X轴倾斜20度，沿Y轴倾斜10度：

div {
     -ms-transform: skew(20deg, 10deg); /* IE 9 */
     -webkit-transform: skew(20deg, 10deg); /* Safari */
     transform: skew(20deg, 10deg);
   }

尝试一下

如果未指定第二个参数，则其值为零。因此，以下示例将<div>元素沿X轴倾斜20度：

div {
     -ms-transform: skew(20deg); /* IE 9 */
     -webkit-transform: skew(20deg); /* Safari */
     transform: skew(20deg);
   }

尝试一下

matrix()方法

matrix()方法将所有2D变换方法组合成一个。matrix()方法采用六个参数，包含数学函数，允许您旋转，缩放，移动（平移）和倾斜元素。参数如下：matrix(scaleX()，skewY()，skewX()，scaleY()，translateX()，translateY())

div {
     -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
     -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
     transform: matrix(1, -0.3, 0, 1, 0, 0);
   }

尝试一下

CSS变换属性

下表列出了所有2D变换属性：

属性	描述
transform	对元素应用2D或3D转换
transform-origin	允许您更改已转换元素上的位置

2D变换方法

方法	描述
matrix(n,n,n,n,n,n)	定义一个二维变换，使用一个由六个值组成的矩阵
translate(x,y)	定义一个二维平移，沿着X轴和y轴移动元素
translateX(n)	定义一个二维平移，沿着x轴移动元素
translateY(n)	定义一个二维平移，沿着y轴移动元素
scale(x,y)	定义一个二维尺度变换，改变元素的宽度和高度
scaleX(n)	定义一个二维尺度变换，改变元素的宽度
scaleY(n)	定义一个二维尺度变换，改变元素的高度
rotate(angle)	定义一个二维旋转，角度在参数中指定
skew(x-angle,y-angle)	定义沿X轴和y轴的二维倾斜变换
skewX(angle)	定义沿x轴的二维倾斜变换
skewY(angle)	定义沿y轴的二维倾斜变换

CSS 2D变换

CSS转换

2D变换浏览器支持

CSS 2D变换

translate()方法

rotate()方法

scale()方法

skewX()方法

skewY()方法

skew()方法

matrix()方法

CSS变换属性

2D变换方法

相关页面