CSS3-3D技术详解

CSS3-3D技术
transform翻译成汉语具有"变换"或者"改变"的意思。
此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果，
最能体现transform 属性强大实力的是实现元素的3D变换效果。


transform 功能函数：

1、位移translate
transform: translate(x , y) 2d
transform:translateX();
transform:translateY();
transform:translateZ(不能写百分比，只能写具体的数值); 3d
transform: translate3d(x , y , z); 3d

2、旋转rotate
transform: rotate(); 2d
transform: rotateX();
transform: rotateY();
transform: rotateZ(); 3d
transform: rotate3d(x,y,z,a); 3d
0 ：不旋转；1：旋转 ；
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素旋转的角度，正值顺时针旋转，负值逆时针旋转。

3、缩放scale
transform: scale3d(x , y , z); 3d
transform: scale(x,y) 2d
transform: scaleX();
transform: scaleY();
transform: scaleZ(); 3d

4、设置空间transform-style
transform-style：flat；处在2D空间里 （默认值）
transform-style：preserve-3d；处在3D空间里

5、景深perspective
perspective:200px; （父元素）
transform:perspective(1200px) （在子元素中使用）
离屏幕多远的距离去观察元素，两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间，当视线距离物体足够远的时候，基本上就不会有近大远小的感觉。

6、原点persnpective-origin
persnpective-origin：值1 值2；(父元素)
原点设置，基点位置，观察3d元素的（位置）角度。
值可以是px % left top right bottom。

7、旋转元素的基点位置transform-origin
transform-origin：x y z； 设置旋转元素的基点位置，z 不能设置%；
transform-origin ：50% 50% 0；（默认值）