CSS3 2D 转换

CSS3 2D变换功能允许在2D空间中变换元素。

元素的2D转换

使用CSS3 2D变换功能,您可以对二维空间中的元素执行基本的变换操作,例如移动,旋转,缩放和倾斜。

变换后的元素不会影响周围的元素,但可以像绝对定位的元素一样将它们重叠。但是,变换后的元素在其默认位置(未变换)仍会在布局中占用空间。

使用CSS变换和变换功能

CSS3 transform属性使用变换功能来操纵元素使用的坐标系,以便应用变换效果。

以下部分描述了这些转换函数:

translate()功能

沿X和Y轴将元素从当前位置移动到新位置。可以写成translate(tx, ty)。如果ty未指定,则假定其值为零。

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);      
}
测试看看‹/›

translate(200px, 50px)该功能将图像沿x轴正方向水平移动200个像素,并沿y轴垂直方向移动50个像素。

rotate()功能

rotate()函数将元素绕其原点(由transform-origin属性指定)旋转指定角度。可以写成rotate(a)。

img {
    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */
       -moz-transform: rotate(30deg);  /* Firefox */
        -ms-transform: rotate(30deg);  /* IE 9 */
            transform: rotate(30deg);      
}
测试看看‹/›

rotate(30deg)该功能将图像绕其原点沿顺时针方向旋转30度。您也可以使用负值来逆时针旋转元素。

CSS3旋转演示

scale()功能

scale()功能增加或减小元素的大小。可以写成scale(sx, sy)。如果sy未指定,则假定等于sx。

img {
    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
        -ms-transform: scale(1.5);  /* IE 9 */
            transform: scale(1.5);  /* Modern Browsers */    
}
测试看看‹/›

scale(1.5)函数按比例将图像的宽度和高度缩放到其原始大小的1.5倍。 函数scale(1)或scale(1,1)对元素没有影响。

skew()功能

skew()函数使元素沿X和Y轴倾斜指定的角度。可以写成skew(ax, ay)。如果ay未指定,则假定其值为零。

img {
    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
       -moz-transform: skew(-40deg, 15deg);  /* Firefox */
        -ms-transform: skew(-40deg, 15deg);  /* IE 9 */
            transform: skew(-40deg, 15deg);  /* Modern Browsers */    
}
测试看看‹/›

该函数skew(-40deg, 15deg)使元素沿x轴水平倾斜-40度,并使y轴垂直倾斜15度。

matrix()功能

matrix()功能可以一次执行所有2D转换,例如平移,旋转,缩放和倾斜。它采用矩阵形式的六个参数,可以写成matrix(a, b, c, d, e, f)。下一节将向您展示如何使用来表示每个2D变换函数matrix()。

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);—其中tx和ty是水平和垂直平移值。

  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);—其中,a是度数。您可以交换sin(a)和-sin(a)值以反转旋转。您可以执行的最大旋转为360度。

  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);—其中sx和sy是水平和垂直缩放比例值。

  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);—其中ax和ay是以deg为单位的水平和垂直值。

这是使用matrix()功能执行2D转换的示例。

img {
    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */
        -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */
            transform: matrix(0, -1, 1, 0, 200px, 50px);  
}
测试看看‹/›

但是,一次执行多个转换时,使用单个转换函数并按顺序列出它们会更方便,如下所示:

img {
    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */
        -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);      
}
测试看看‹/›

2D转换功能

下表简要概述了所有2D转换功能。

功能描述
translate(tx,ty)沿X和Y轴将元素移动给定的数量。
translateX(tx)沿X轴将元素移动指定的量。
translateY(ty)沿Y轴将元素移动指定的量。
rotate(a)根据transform-origin属性定义,以指定的角度围绕元素的原点旋转元素。
scale(sx,sy)按给定数量向上或向下缩放元素的宽度和高度。该功能scale(1,1)无效。
scaleX(sx)按给定数量向上或向下缩放元素的宽度。
scaleY(sy)按给定数量向上或向下缩放元素的高度。
skew(ax,ay)使元素沿X和Y轴倾斜给定角度。
skewX(ax)使元素沿X轴倾斜给定角度。
skewY(ay)使元素沿Y轴倾斜给定角度。
matrix(n,n,n,n,n,n)以包含六个值的转换矩阵的形式指定2D转换。