CSS3 transform属性介绍

学习CSS3 transform属性：可以实现旋转，缩放，移动等功能（可分x,y,z轴）

 

1. rotate（旋转元素对象，值为一个度数值）

2. scale（改变元素宽高，值为正数、负数、小数）

3. translate（偏移元素）

4. skew（倾斜元素对象，值为一个度数值）

5. origin（设置元素对象的中心点）

浏览器兼容：

• FireFox拓展前缀：-moz-CSS3属性：值

• Chrome和Safari拓展前缀：-webkit-CSS3属性：值

• Opera拓展前缀：-o-CSS3属性：值

• IE9拓展前缀：-ms-CSS3属性：值

• IE6/7/8：详情见此（兼容大部分CSS3属性）（有副作用！）

rotate()：能够旋转指定的元素对象，主要在二维空间内进行操作，接受一个角度参数值

语法：rotate（度数值）

例子：transform:rotate(10deg)   deg为度数单位

scale()：能够缩放元素大小，函数包含两个参数，分别定义x和y轴缩放比例

语法：scale（水平倍数，垂直倍数）  scaleX(水平缩放)  scaleY(垂直缩放)

例子：transform:scale(0.5,0.5) 整体缩小0.5倍

translate():能够重新定位元素坐标，函数包含两个参数，分别定义x和y轴坐标

语法：translate（x轴坐标，y轴坐标） scaleX(水平偏移)  scaleY(垂直偏移)

例子：transform:translate(20px,20px) 往右上方偏移20px

skew()：能够让元素倾斜显示，该函数包含两个参数值，分别定义x和y轴倾斜角度

语法：skew（x轴角度，y轴角度）  scaleX(水平倾斜)  scaleY(垂直倾斜)

例子：transform:skew(20deg,20deg)  变形

origin()：改变对象的中心点的位置 （CSS默认中心点为元素的中心）

语法：origin（x轴的坐标，y轴的坐标，z轴的坐标）  z轴大部分浏览器不支持（略过）

例子：transform-origin(left,top)  中心点定义在左上角  参数可以设置具体像素或百分比