CSS3 2D转换

CSS3 转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

它如何工作？

转换是是元素改变形状、尺寸和位置的一种效果。

你可以使用2D或3D转换你的元素。

浏览器支持

属性	浏览器支持
transform

IE10、FireFox以及Opera支持transform属性。Chrome和Safari需要前缀-webkit-.

注释：IE9需要前缀-ms-.

2D转换方法：

translate()
rotate()
scale()
skew()
matrix()

1.translate()方法

元素从当前位置移动，根据给定的left(x坐标)和top(y坐标)位移参数:

  /*translate方法位移*/div {width:100px;height:80px;background-color:orange;position:absolute;left:100px;top:100px;}div.translateOne {transform:translate(30px,30px);z-index:1;}div.translateTwo {background-color:blue;}

2.rotate()方法

元素顺时针给定的角度、允许负值，元素将逆时针旋转。

        /*2D旋转*/div {width: 150px;height: 50px;background-color: orange;text-align: center;position: absolute;left: 100px;top: 100px;}div.rotateOne {transform: rotate(30deg);-webkit-transform:rotate(30deg);}div.rotateTwo {background-color: blue;color: white;}

3.scale()方法

        /*2D缩放*/div {width: 100px;height: 100px;background-color: orange;position: absolute;left: 100px;height: 100px;}div.scaleTwo {background-color: red;transform: scale(0.5,0.5);}

值scale(2,4)吧宽度转换为原始的2倍，把高度转换为原始的4倍。

4.skew()方法

通过skew()方法，元素倾斜给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数：

        /*2D倾斜，面积不变*/div {width:100px;height:100px;background-color:orange;position:absolute;left:100px;top:100px;}div.skewTwo {background-color:red;transform:skew(30deg,0deg);}

值skew(30deg,20deg)围绕X轴把元素倾斜30度，围绕Y轴倾斜20度。

5.matrix()方法

matrix()方法把所有2D转换方法组合在一起。

matrix()方法需要六个参数，包含数学函数，允许你：旋转、缩放、移动以及倾斜元素。

如何使用matrix方法将div元素旋转30度：

        /*2d组合函数*/div {width: 100px;height: 100px;background-color: orange;position: absolute;left: 100px;top: 100px;}div.MatrixTwo {transform:matrix(0.866,0.5,-0.5,0.866,0,0);background-color:red;}

新的转换属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3

2D Transform 方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。