HTML新手入门之CSS3 3D

3D

2D场景中，在屏幕上水平和垂直的交叉线x轴和y轴；
3D场景中，在垂直于屏幕的方法，相对于2D多出个z轴
z轴：靠近屏幕的方向为正向，远离屏幕的方向反向

搭建3D场景

transform-style属性用于搭建3D场景，他有两个属性值
transform-style：flat
transform-style：preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现；preserve-3d表示所有子元素在3D空间呈现。

3D位移

css3的3D位移主要包括translateZ()和translate3d两个功能函数；
☞translate3d（tx,ty,tz）
1.ty：代表纵向坐标位移向量的长度；
2.tx：代表横向坐标位移向量的长度；
3.tz：代表Z轴位移向量的长度。（此值不能为百分比）
☞translateZ（t）
在z轴的向量位移的长度。

3D旋转

css3中的3D旋转主要包括rotateX（）、rotateY（）、rotateZ（）和rotate3d（）四个功能函数；
1.rotateX（a）
rotateX（）函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；值为正值，则元素围绕X轴顺时针旋转；值为负值，元素围绕X轴逆时针旋转。
2.rotateY（a）
rotateY（）函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；值为正值，则元素围绕Y轴顺时针旋转；值为负值，元素围绕Y轴逆时针旋转。
3.rotate3d（x,y,z,a）(建议取值0或1)
◦ x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
◦ y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
◦ z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
◦ a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3D缩放

css3中的3D缩放主要包括scaleZ（）和scale3d（）两个功能函数；
1.scale3d（）
◦ sx：横向缩放比例；
◦ sy：纵向缩放比例；
◦ sz：Z轴缩放比例；
2.scaleZ（s）
指定元素每个点在Z轴的比例。

css3 3D属性实现一个立方体

通过css3 3D中的属性，可以实现一个简易的立方体，代码如下：效果如下：