一、transform属性

概念: Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法：transform: none|transform-functions;

取值：

取值	描述
none	定义不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)、translateY(y)、translateZ(z)	定义转换（只是用 X 轴的值、用 Y 轴的值）定义3D转换（用 Z 轴的值。）
-----------	----------
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)、scaleY(y)、scaleZ(z)	通过设置 X 、Y 轴的值来定义缩放转换；通过设置 Z 轴的值来定义 3D 缩放转换。
-----------	----------
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)、rotateY()、rotateZ()	定义沿着 X 、Y 、 Z 轴的 3D 旋转。
-----------	----------
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
-----------	----------
perspective	为 3D 转换元素定义透视视图。

属性 transform 转换细节

1.位移-translate

语法:

transform: translate3d(水平移动距离, 垂直移动距离，Z轴移动距离)
transform: translate(水平移动距离, 垂直移动距离)
transform: translateX
transform: translateY
transform: translateZ

取值：x轴正向为右, Y轴正向向下，Z轴与视线方向相同

像素单位数值
百分比(参照物为盒子自身尺寸)

注意:

translate()如果只给一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离: translateX() 和 translateY()
tf属性对于行内元素是无效的
添加例如tf属性的盒子可以提高盒子层级,保留原来的位置--类似相对定位的特点
取值中间由逗号隔开

注意：

默认情况下，z轴的移动效果无法观察到，z轴是视线方向，电脑屏幕是平面，默认无法观察到远近效果

3d模式：需要开启视距(perspective)才能看到Z轴移动的效果

2.旋转-rotate

语法:

transform: rotate(角度)
transform: rotateX(角度)
transform: rotateY(角度)
transform: rotateZ(角度)
transform: rotate3d(x, y, z)

注意：角度单位是deg

取值: 取值正负均可

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

空间旋转-左手法则：左手握住旋转轴，手指指向正或负值方向，手指弯曲方向为旋转正值方向

3d模式或者Z轴属性效果：需要开启立体图形呈现效果（transform-style：perserve-3d）才能更好的看到效果

3.缩放

语法:

transform: scale(x轴缩放倍数, y轴缩放倍数)
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

注意：

只为scale设置一个值, 表示x轴和y轴等比例缩放
scale值大于1表示放大, scale值小于1表示缩小

transform复合属性使用

语法:

transform: translate() rotate()
transfrom: rotateX() rotsteY() rotateZ()
`transform: rotate() scale()

注意点：当平移与旋转一起使用的时候，要把平移放在旋转的前面旋转会改变坐标轴方向

二、转换原点属性-transform-origin

语法:

默认圆点是盒子中心点
transform-origin: 圆点于X轴位置, 圆点于Y轴位置，圆点于Z轴所处的位置

取值:

方位名词(用的最多)
像素单位数值（正负均可）
百分比(参照盒子自身尺寸计算)

三、视距、景深、透视（perspective属性）

语法：perspective: 800px;

作用：

3d效果、空间转换时，为元素添加近大远小、近实远虚的视觉效果，可以理解为就是眼睛距离目标距离的远近。

属性与值（添加个父级）：

perspective：值
取值：像素单位数值，数值一般在400-1200之间

特点：

只能设置给使用了3d元素的最近一级的父元素才有效果
属性效果: 近大远小, 近实远虚

四、立体图形属性transform-style：preserve-3d

呈现立体图形步骤:

盒子父元素添加transform-style：preserve-3d
按需求设置盒子的位置(位移或旋转)

注意: 空间内，转换元素都有自己独立的坐标轴，互不干扰

CSS3-transform属性