好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

使用纯CSS3实现一个3D旋转的书本_html/css_WEB-ITnose

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

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


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

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

1. 构造一个立方体

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


.stage {    width: 200px;    height: 260px;    perspective: 1000px;    perspective-origin: center center;// 缺省值,可忽略} 
上述代码把元素放在距离观察点1000px的地方(Z轴向),并且在X/Y轴向上居中。

查看更多关于使用纯CSS3实现一个3D旋转的书本_html/css_WEB-ITnose的详细内容...

  阅读:37次