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
	向元素应用 2D 或 3D 转换。	3
	允许你改变被转换元素的位置。	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 轴。