CSS3 2D转换模块

2D转换模块

属性：transform

方法：

rotate()      元素顺时针旋转给定的角度，负值时，元素将逆时针旋转，单位deg。

有rotateX、rotateY、rotateZ，默认Z

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

有translateX，translateY

scale()       元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。参数>1时，放大；参数<1时，缩小。

有scaleX，scaleY

注意点：

1.如果需要进行多个转换，那么用空格隔开

2.2D转换模块会修改元素的坐标系，所以旋转后在平移就不是水平平移了

例：transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

 

属性：transform-origin （形变中心点）

transform-origin : x y; x水平方向 y垂直方向

参数：具体像素（15px），百分比（15%），特殊关键字（right center bottom）

 

属性：perspective 

perspective:150px; 像素表示距离

透视：近大远小 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面