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

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

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

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

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转换功能。