css3 2D变换 – CSS3高级教程 css32d变换|CSS

上一章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转换函数【css3 2D变换 – CSS3高级教程】下表简要概述了所有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转换。