CSS3 2D 转换

CSS3 转换

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

浏览器支持

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

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

2D 转换

在本章您将了解2D变换方法：

translate()

rotate()

scale()

skew()

matrix()

translate()方法

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

rotate()方法

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

scale() 方法

skew()方法

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

matrix() 方法

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

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

新转换属性

以下列出了所有的转换属性:

Property描述CSS

transform 适用于2D或3D转换的元素 3

transform-origin 允许您更改转化元素位置 3

2D 转换方法

函数描述

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 轴。