html5 css与3D Max,HTML5和CSS3实现3D转换效果 CSS3的3D效果

上次，我们一起研究了css3的2d模块，这次我们一起来看一下css3的3d模块。

首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。

不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。

在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一种表现，当然要看到近大远小的3d效果，还需要在父元素上添加透视属性：transform:perspective(500px);值为透视点到元素的距离，具体概念请看美术透视教学。。。。多说无益，上代码：

}.div1{margin-top:100px;transform:perspective(500px) rotatey(0deg);position:relative;border:1px solid #000000;background-color:#ff0000;

}.div1 div{

transform:rotatey(45deg);position:absolute;font-size:80px;line-height:200px;text-align:center;top:0;left:0;

}

1