CSS3----3D切换

1.3D变换使用基于2D变换的相同属性，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：

 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
 
3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

2.在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。
随着px的增加，直观效果上：

X：从左向右移动

Y：从上向下移动

Z：以方框中心为原点，变大

如下图:



注意:
从上图的效果可以看出，当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。
2.3D旋转:
我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()和rotateZ()。

注意:
rotate3d()中取值说明：
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3.3D缩放:
通过使用3D缩放函数，可以让元素在Z轴上按比例缩放

X：以方框Y轴，左右变宽

Y：以方框X轴，上下变高

Z：看不出变换。scaleZ()和scale3d()函数单独使用时没有任何效果。

注意:caleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果

4.3D Transform转换属性
1.transform-origin
transform-origin，变形的原点。默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处
2…backface-visibility
backface-visibility属性决定元素旋转背面是否可见
属性语法:

backface-visibility: visible | hidden