CSS 2D转换——transform属性

2D转换

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

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	Chrome	IE	Firefox	Safari	Opera
transform	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

转换属性

属性	描述	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 轴。

常见方法

rotate()方法

通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

你好。这是一个 div 元素。

你好。这是一个 div 元素。

rotate()括号里写角度，单位是deg。如rotate（45deg），表示顺时针旋转45度。

rotate(-30deg)表示逆时针旋转30度

属性transform-origin可以设置旋转的中心点，默认是图形的中心。可以设置为transform-origin: top right;表示旋转中心为左上角。设置transform-origin: 20px 40px;表示围绕距离左侧20像素上方40像素的点旋转。

translate()方法

通过translate()方法，元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数：

值translate(50px, 100px)把元素从左侧移动50像素，从顶端移动100像素。

scale()方法

通过scale（）方法，元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（y轴）参数。

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

值scale(2)把长宽都放大2倍

值scalex(5)只把长变为5倍

skew()方法

通过skew()方法，元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）参数

值skew(30deg, 20deg)围绕x轴把元素翻转30度，围绕y轴翻转20度。

matrix()方法

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

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

使用matrix()方法把div元素旋转30度