纯CSS3如何实现3D旋转书本效果
2019-08-27 07:09:58来源:爱站网 阅读 ()
现在有很多电商都开始使用3D模型来为大家展示商品,其中图书就是最简单的例子,那么你知道纯CSS3如何实现3D旋转书本效果吗?下面我们就一起去看看纯CSS3实现3D旋转书本效果介绍。
书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条。 所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景。
1. 构造一个立方体
要创建一个立方体,首先我们需要创建一个虚拟的三维视觉空间,这可以通过设置包容器元素的perspective属性获得。
?
- .stage?{? ??
- width:?200px;? ??
- height:?260px;? ??
- perspective:?1000px;? ??
- perspective-origin:?center?center;//?缺省值,可忽略? ??
- }??
上述代码把元素放在距离观察点1000px的地方(Z轴向),并且在X/Y轴向上居中。
- <div?class="stage">? ??
- <div?class="cube">? ??
- <figure?class="back"></figure>? ??
- <figure?class="top"></figure>? ??
- <figure?class="bottom"></figure>? ??
- <figure?class="left"></figure>? ??
- <figure?class="right"></figure>? ??
- <figure?class="front"></figure>? ??
- </div>? ??
- </div>???
接着,我们在包容器元素里面添加一个立方体元素,6个边(上下左右和前后),之所以使用figure,是因为需要支持贴图。
我们需要根据书本的厚度和长宽来确定立方体各个面的坐标位置,在本例中所用书本模型(一本MySQL书)的绝对厚度为18.2px,高度260px,宽度197.6px。
那么根据简单的几何知识,前后面距离立方体中心的距离为18.2/2=9.1px,其中“后”元素需要再翻转一下(即“背”过去)。
- .front?{? ??
- transform:?translateZ(9.1px);? ??
- }? ??
- .back?{? ??
- transform:?rotateY(180deg)?translateZ(9.1px);? ??
- }???
用类似的计算方法,我们可以把其他4条边放置(平移+旋转变换)到各自的位置,从而拼装成一个虚拟的立方体。
- .front?{? ??
- transform:?translateZ(9.1px);? ??
- }? ??
- .back?{? ??
- transform:?rotateY(180deg)?translateZ(9.1px);? ??
- }? ??
- .top?{? ??
- transform:?rotateX(90deg)?rotateZ(90deg)?translateZ(98.8px)?translateY(-89.7px);? ??
- width:?18.2px;? ??
- height:?197.6px;? ??
- }? ??
- .bottombottom?{? ??
- transform:?rotateX(-90deg)?rotateZ(90deg)?translateZ(161.2px)?translateY(-89.7px);? ??
- }? ??
- .left?{? ??
- transform:?rotateY(-90deg)?translateZ(9.1px);? ??
- width:?18.2px;? ??
- }? ??
- .rightright?{? ??
- transform:?rotateY(90deg)?translateZ(188.5px);? ??
- width:?18.2px;? ??
- }??
?
2. 添加封面 接着我们给前后以及左侧面元素添加背景图(可以使用一张图,然后从不同的位置截取),给其他3个面添加背景颜色,并给“底”面添加阴影效果:
?
?
- .front?{? ??
- transform:?translateZ(9.1px);? ??
- background:?url("//wow.techbrood.com/uploads/160301/mysql.png")?top?rightright;? ??
- background-size:?auto?100%;? ??
- }? ??
- .back?{? ??
- transform:?rotateY(180deg)?translateZ(9.1px);? ??
- background:?url("//wow.techbrood.com/uploads/160301/mysql.png")?top?left;? ??
- background-size:?auto?100%;? ??
- }? ??
- .top?{? ??
- transform:?rotateX(90deg)?rotateZ(90deg)?translateZ(98.8px)?translateY(-89.7px);? ??
- background:?#fafafa;? ??
- width:?18.2px;? ??
- height:?197.6px;? ??
- }? ??
- .bottombottom?{? ??
- transform:?rotateX(-90deg)?rotateZ(90deg)?translateZ(161.2px)?translateY(-89.7px);? ??
- background:?#ccc;? ??
- width:?18.2px;? ??
- height:?197.6px;? ??
- -webkit-filter:?drop-shadow(0?0?26px?rgba(0,?0,?0,?0.75));? ??
- }? ??
- .left?{? ??
- transform:?rotateY(-90deg)?translateZ(9.1px);? ??
- background:?url("//wow.techbrood.com/uploads/160301/mysql.png")?top?center;? ??
- background-size:?auto?100%;? ??
- width:?18.2px;? ??
- }? ??
- .rightright?{? ??
- transform:?rotateY(90deg)?translateZ(188.5px);? ??
- background:?#ddd;? ??
- background-size:?auto?100%;? ??
- width:?18.2px;? ??
- }??
这样我们就实现了一个逼真的3D书本视觉模型。
3. 添加旋转动画
这个比较简单,使用rotateY方法就可以。
?
?
- @-webkit-keyframes?rotate?{? ??
- 0%?{? ??
- transform:?rotateY(0)?translateX(-18.2px);? ??
- }? ??
- 100%?{? ??
- transform:?rotateY(360deg)?translateX(-18.2px);? ??
- }? ??
- }??
?
最终的效果图如下:
纯CSS3如何实现3D旋转书本效果?3D旋转书本效果其实很简单,它不需要复杂的建模过程,仅仅使用图片和CSS3的一些变换即可实现。
原文链接:https://js.aizhan.com/web_authoring/css/8533.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:选择CSS常用选择器的方法
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习? 2020-06-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash