使用css3绘制3d手机

首先来看例子：

css3对3D的支持

css3有一个简单的3d模型，包括旋转，平移，透视等概念都有对应的属性实现。 通过旋转和在x、y、z轴上的移动，我们不难画出一个立方体出来，具体步骤就是设置父级的transform-style:preserve-3d，通过perspective来设置景深，然后通过translateX，translateY，translateZ来拉开各个子元素的距离，通过rotateX，rotateY，rotateZ来旋转子元素。 具体例子参考这里

创建3d手机

有了立方体的模型，我们只需要把每个面改为iphone的图片即可，素材来源于网上。

但是仅仅这样还不行，因为手机四个角都是一个弧形， 所以我们需要单独对四个角进行处理，使用四个div进行平移旋转即可。最后我们加上shadow阴影，使我们的手机看起来更加真实。