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像素。
css3 2D变换 – CSS3高级教程

文章图片
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 2D变换 – CSS3高级教程

文章图片
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)对元素没有影响。
css3 2D变换 – CSS3高级教程

文章图片
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度。
css3 2D变换 – CSS3高级教程

文章图片
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转换。

    推荐阅读