首页 > 代码库 > CSS3 2D转换模块

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; 像素表示距离

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

 

CSS3 2D转换模块