CSS动画实例3D立方体.docx
《CSS动画实例3D立方体.docx》由会员分享，可在线阅读，更多相关《CSS动画实例3D立方体.docx（23页珍藏版）》请在冰豆网上搜索。
CSS动画实例3D立方体
CSS动画实例：
3D立方体
CSS3支持3D转换，与3D转换有关的属性有：
transform：
向元素应用2D或3D转换。
transform-origin：
改变被转换元素的位置。
transform-style：
规定被嵌套元素如何在3D空间中显示。
perspective：
规定3D元素的透视效果。
perspective-origin：
规定3D元素的底部位置。
backface-visibility定义元素在不面对屏幕时是否可见。
在transform属性设置中，可使用的3D转换函数主要有：
matrix3d（n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n）：
定义3D转换，使用16个值的4x4矩阵。
translate3d（x,y,z）：
定义3D平移动转换。
translateX（x）：
定义3D沿X轴平移转换。
translateY（y）：
定义3D沿Y轴平移转换。
translateZ（z）：
定义3D沿Z轴平移转换。
scale3d（x,y,z）：
定义3D缩放转换。
rotate3d（x,y,z,angle）：
定义3D旋转。
rotateX（angle）：
定义沿X轴的3D旋转。
rotateY（angle）：
定义沿Y轴的3D旋转。
rotateZ（angle）：
定义沿Z轴的3D旋转。
perspective（n）定义3D转换元素的透视视图。
学习和利用3D转换，可以绘制立体化的图形。
1．一个简单的立方体
一个立方体有前、后、左、右、上、下共六个面，可在页面中定义立方体如下：
front