css3 2D变换 – CSS3高级教程

上一章CSS3高级教程请查看： css3阴影shadow

CSS3 2D变换特性允许元素在2D空间中变换。

元素二维变换

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

转换后的元素不会影响周围的元素，但是可以重叠它们，就像绝对定位的元素一样，但是，转换后的元素仍然在布局的默认位置(未转换)占据空间。

使用CSS变换和变换函数

CSS3转换属性使用转换函数来操作元素使用的坐标系统，以便应用转换效果。

下面一节将介绍这些转换函数：

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);  /* 标准语法 */    
}img {

函数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度，可以使用负值来逆时针旋转元素。

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);  /* 现代浏览器 */    
}

函数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);  /* 现代浏览器 */    
}

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

matrix()函数

matrix()函数可以同时执行所有的2D转换，比如平移translate、旋转rotate、缩放scale和倾斜skew。它采用矩阵形式的6个参数，可以写成矩阵(a, b, c, d, e, f)。

• 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是deg中的值。你可以交换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转换函数。