2d转换 3D转换

2d转换 :

translate()方法

平移图形。所谓的平移，是指图形沿着x轴或y轴进行直线运动。平移不会改变图形的形状和大小。

rotate()方法

rotate(<angle>);<angle>为一个角度值，单位deg，可以为正数或者负数，正数是顺时针旋转，负数是逆时针旋转。

scale()方法

scale()方法来将元素根据中心原点进行缩放或放大。

语法：transform:scale(x,y)

说明：x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

scaleX(x)

语法：transform:scaleX(x)

说明：x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

scaleY(y)

语法：transform:scaleY(y)

说明：y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

语法：transform:skew(20deg ,10deg)

元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度

 skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度

 语法：transform:skewX(20deg )

元素沿X轴倾斜 20 度（垂直方向X轴，逆时针旋转)

 skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度

 语法：transform:skewY(20deg )

元素沿 Y 轴倾斜 20 度（按照水平方向Y轴，顺时针旋转)

 matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

CSS 2D 转换方法

 

3D转换:

 

我们生活所居住的房间也是3D立体空间的，主要有X轴、Y轴Z轴共同组成。

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

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

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

rotateX() 方法

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

语法： transform: rotateX(150deg);

绕 X 轴旋转150度。

rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度。

 transform: rotateY(130deg);

绕 Y轴旋转130度。

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度。

transform: rotateZ(90deg);

绕 Z轴旋转90度。

透视

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

语法：

perspective：none | <length>