css 3D转换

一、3D变换属性

（1）transform  元素应用2D或3D转换

（2）transform-origin  允许你改变被转换元素的位置

eg： transform-origin：right bottom;  以右下角为基点进行2、3D的操作 

（3）transform-style 规定3D的透视效果(3D的呈现或者说是三维立体环境的呈现)

 transform-style: preserve-3d（开启3D模式）;/flat（默认 不开启3D模式）; 

（4）perspective  规定3D元素的透视效果

 perspective: ..px;  (透视越大/小，所呈现出来的物体越小/大)  

 注意：3D的透视属性写在被作用物体的父级！ 

（5）perspective-origin 允许你改变3D元素的底部位置

 eg：perspective-origin:10% 100px;  

属性定义 3D 元素所基于的 X 轴和 Y 轴。默认值50% 50%

注意：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

（6）backface-visibility 定义元素在不面对屏幕时是否可见

eg：<div id="div1" style="backface-visibility:hidden;">DIV 1</div> 

       <div id="div2" style="backface-visibility:visible;>DIV 2</div>

输出结果是 动画里面无论应用什么属性盒子只显示了DIV 2的文字

二、3D转换方法

（1）位移 ranslate3d

3D位移优先

translate3d(..x,..y,..z);/translateX(..);/translateY(..);/translateZ(..);

（2）放缩 scale3d

scale3d(..x,..y,..z);/scaleX(..deg);/scaleY(..deg);/scaleZ(..deg);

（3）旋转 rorate3d

x、y、z的取值范围为0到1   0不运行 1运行

rotate3d(x,y,z,..deg);/rotateX(..deg);/rotateY(..deg);/rotateZ(..deg);

（4）倾斜 skew

skew(..xdeg,..ydeg,..zdeg);/rotateX(..deg);/rotateY(..deg);/rotateZ(..deg);

（5）区分：translateZ 与 perspective

相同：两者都是数值的大小来改变盒子物体的大小

不同：在有多个物体时 perspective都统一作用他们，大小相同；

          而translateZ可分别设置，使多个物体大小不一；