transform 属性
1、旋转 transform：rotate(<输入角度值>)
deg:角度（角度正值为顺时针）
浏览器内核前缀是加载transform上边，也就是只要浏览器兼容transform这个属性，那就必然兼容rotate
transform:translate-- 位移属性
一.transform:translateX(x)水平方向
二.transform:translateY(y)垂直方向
三.transform:translate(x,y)
value值可为具体值px、em、百分比等。
transform:translate(x,y)中，y值为可选参数。
1.若不写y值则默认为0，表示在X轴平移。
2.x值为必写值，若只想在y轴垂直方向移动，则需写x=0.
Z轴平移 transform : translateZ( z ) 指定对象z轴的平移
常用于遮罩里面
translate3d：指定对象的3D位移
语法：transform：translate3d（x，y，z）；
参数说明：分别对应相应的轴，参数不允许省略。
transform:scale(number)---
整体缩放倍数（缩小、扩大），1为基准。
transform:scaleX（x）--坐标原点在水平方向中线上
transform:scaleY（y）--坐标原点在垂直方向中线上
transform:scale（x，y）--坐标原点在图片的正中心，y为可选值，若y不写则默认为与x值相同，保证图片等比例缩小或放大，不会变形。
3D缩放scaleZ
transform:scaleZ(0.5); 变的是厚度
transform:scale3d(x,y,z);参数不允许省略；
扭曲skew
transform : skew / skewX / skewY（角度）
skewX(angle) 正值为负角度，负值时为正角度。-90°~90°
skewY(angle)正值为正角度，负值为负角度。-90°~90°
skew（）若仅一个值时，此值为X的值，Y为0.
3D转换角度--transform：rotate
rotateX(deg)--围绕着几何中心X轴旋转
rotateY(deg)--围绕着几何中心Y轴旋转
rotateZ(deg)--围绕着几何中心Z轴旋转(效果类似于rotate() )
transform：rotate（x,y,z,角度）--x,y,z表示旋转的方向，第四个参数表示旋转的角度，参数不允许省略。rotate（1,1,1,45deg）三个叠加效果。
xyz的值满足x²+y²+z²=1，按比例缩放大小，然后按缩放后的数值乘以设置的角度值来进行旋转
4个数值其中某个为负值，表示逆时针旋转。
transform 与坐标系统
transform-origin属性：更改转换元素的参考中心
语法：transform-origin:x-axis y-axis z-axis;
-------------------------------------------------
更改转换元素的参考中心点;可以省略Z轴，表示2D坐标。
x-axis的值可以为left|center|right||length|%
y-axis的值可以为top|center|bottom|length|%
【百分比是相对元素自身】
第二个参数y-axis可以省略，如果不写的话代表的是50%
transform：matrix（a,b,c,d,tx,ty);
注意书写方向是竖直方向
X、Y表示转换元素的所有坐标
目标矩阵说明：
ax+by+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置
transform：matrix（1,0,0,1,x,y）等同于transform：translate（x,y）；
矩阵matrix镜像对称效果
matrix((1-k*k)/(1+k*k), 2k/(1+k*k), 2k/(1+k*k), (k*k -1)/(1+k*k),0,0)
对称轴一定通过元素变换的中心点，k是对称轴的斜率
transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)。
transform: matrix(sx, 0, 0, sy, 0, 0)等同于transform: scale(sx, sy)。
transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)等同于transform: rotate(θdeg)。
transform: matrix(1, tanθy, tanθx, 1, 0, 0)等同于transform: skew(θxdeg, θydeg)。
实现3D效果 有被挡住部分
transform-style：preserve-3d;//写在父元素上
transform:rotateY(45deg)//写在子元素上
perspective-origin : x y ;
默认值为：perspective-origin :50% 50%;
观察的位置，类似主视图俯视图左视图切换视角
若值为bottom，表示从下往上看。
若值为top，表示从上往下看。
backface-visibility属性：
指定元素背面面向用户时是否可见。
语法：
backface-visibility：visible | hidden；
默认为visible可见
