使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，

无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用。

书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。

所以要构造一个3D书本展示，问题就被分解为构造一个立方体+旋转+图片背景。

1. 构造一个立方体

要创建一个立方体，首先我们需要创建一个虚拟的三维视觉空间，这可以通过设置包容器元素的perspective属性获得。

这样我们就实现了一个逼真的3D书本视觉模型。

3. 添加旋转动画

这个比较简单，使用rotateY方法就可以。

@-webkit-keyframes rotate {    0% {        transform: rotateY(0) translateX(-18.2px);    }    100% {        transform: rotateY(360deg) translateX(-18.2px);    }}

最终的效果图如下：

你可以在踏得网上自己试试看 （http://wow.techbrood.com/fiddle/17587）。

by iefreer