CSS：css3的transform有哪些属性（四星）

使用css3的transform，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。

transform属性有：变换，可对元素进行位移(translate)、旋转(rotate )、缩放(scale )、倾斜(skew )操作，支持2D或者3D转换，IE9+支持。

transform综合应用：平行四边形（skew）、梯形（perspect、rotate）、菱形（rotate、scale）、折角（rotate）

1.transform-origin

在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。

设置对象变换的原点（基准点），通常和rotate旋转、scale缩放、skew斜切等一起使用，IE9+

2D情况下：默认值 50% 50%，即center center

3D情况下：默认值 50% 50% 0

取值介绍：

1. X轴（水平方向）：left｜center｜right｜length｜%
2. Y轴（垂直方向）：top｜center｜bottom｜length｜%
3. Z轴：length

注意：如果只设置一个值，则该值作用于横坐标，纵坐标默认50%，Z轴默认为0，另外百分比是相对于自身进行计算的。

如：transform-origin: left bottom; //把基准点修改为元素的左下角

2.translate 位移

对象进行2D空间或3D空间的位移。

使用规则：

• translate(): 第一个参数指定X轴的位移量（px）[必须], 第二个参数指定Y轴的位移量[（px）当不设置时, 默认为0];
• translateX(): 指定X轴的位移;
• translateY(): 指定Y轴的位移;
• translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;
• translateZ(): 指定Z轴的位移;

使用translate时需要注意位移量的百分比是相对元素自身宽高来计算的。

translate有一个最常见的应用，即当元素宽