2D转换、3D转换

一2D转换

1.1 translate()方法

translate()方法用来平移图形。是指图形沿着x轴或y轴进行直线运动。

transform:translate(x,y)图形的x,y平移

transform: translateX(x) x轴方向的平移

transform:translateY(y)y轴方向的平移

1.2 rotate()方法

rotate()方法用来旋转图形

transform：rotate( 45deg ) 顺时针旋转90°

1.3scale()方法

scale()方法元素的尺寸会增加或减少

 transform：scale(1.5)图像元素的放大

transform：scale(0.5)图像元素的缩小

1.4 transform-origin 改变转换元素的位置

transform-origin ：x y 百分比或方位名词

1.5skew()

skew( x,y) 是一个倾斜属性，可以改变元素在页面中的形状，让元素沿着X和Y轴进行2D倾斜转换。

二3D转换

3D立体空间，主要有X轴、Y轴Z轴共同组成。

X轴：水平向右，X右边是正值，左边是负值。

Y轴：垂直向下，Y下面是正值，上面是负值。

Z轴：垂直屏幕，往外面是正值，往里面是负值。

2.1 rotateX() 

transform: rotateX(90deg) 方法使元素绕其 X 轴旋转给定角度。

2.2 rotateY()

 transform: rotateY(90deg);方法使元素绕其 Y 轴旋转给定角度。

2.3 rotateZ()

 transform: rotateZ(90deg);) 方法使元素绕其 Z 轴旋转给定角度。

2.4 perspective 

指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。

用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小；值越小，3D 效果就越明显。