纯CSS3如何实现3D旋转书本效果

2019-08-27 07:09:58来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

现在有很多电商都开始使用3D模型来为大家展示商品,其中图书就是最简单的例子,那么你知道纯CSS3如何实现3D旋转书本效果吗?下面我们就一起去看看纯CSS3实现3D旋转书本效果介绍。
书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条。 所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景。
1. 构造一个立方体
要创建一个立方体,首先我们需要创建一个虚拟的三维视觉空间,这可以通过设置包容器元素的perspective属性获得。

?

CSS Code复制内容到剪贴板
  1. .stage?{? ??
  2. width:?200px;? ??
  3. height:?260px;? ??
  4. perspective:?1000px;? ??
  5. perspective-origin:?center?center;//?缺省值,可忽略? ??
  6. }??

上述代码把元素放在距离观察点1000px的地方(Z轴向),并且在X/Y轴向上居中。

CSS Code复制内容到剪贴板
  1. <div?class="stage">? ??
  2. <div?class="cube">? ??
  3. <figure?class="back"></figure>? ??
  4. <figure?class="top"></figure>? ??
  5. <figure?class="bottom"></figure>? ??
  6. <figure?class="left"></figure>? ??
  7. <figure?class="right"></figure>? ??
  8. <figure?class="front"></figure>? ??
  9. </div>? ??
  10. </div>???

接着,我们在包容器元素里面添加一个立方体元素,6个边(上下左右和前后),之所以使用figure,是因为需要支持贴图。
我们需要根据书本的厚度和长宽来确定立方体各个面的坐标位置,在本例中所用书本模型(一本MySQL书)的绝对厚度为18.2px,高度260px,宽度197.6px。
那么根据简单的几何知识,前后面距离立方体中心的距离为18.2/2=9.1px,其中“后”元素需要再翻转一下(即“背”过去)。

CSS Code复制内容到剪贴板
  1. .front?{? ??
  2. transform:?translateZ(9.1px);? ??
  3. }? ??
  4. .back?{? ??
  5. transform:?rotateY(180deg)?translateZ(9.1px);? ??
  6. }???

用类似的计算方法,我们可以把其他4条边放置(平移+旋转变换)到各自的位置,从而拼装成一个虚拟的立方体。

CSS Code复制内容到剪贴板
  1. .front?{? ??
  2. transform:?translateZ(9.1px);? ??
  3. }? ??
  4. .back?{? ??
  5. transform:?rotateY(180deg)?translateZ(9.1px);? ??
  6. }? ??
  7. .top?{? ??
  8. transform:?rotateX(90deg)?rotateZ(90deg)?translateZ(98.8px)?translateY(-89.7px);? ??
  9. width:?18.2px;? ??
  10. height:?197.6px;? ??
  11. }? ??
  12. .bottombottom?{? ??
  13. transform:?rotateX(-90deg)?rotateZ(90deg)?translateZ(161.2px)?translateY(-89.7px);? ??
  14. }? ??
  15. .left?{? ??
  16. transform:?rotateY(-90deg)?translateZ(9.1px);? ??
  17. width:?18.2px;? ??
  18. }? ??
  19. .rightright?{? ??
  20. transform:?rotateY(90deg)?translateZ(188.5px);? ??
  21. width:?18.2px;? ??
  22. }??

?

2. 添加封面 接着我们给前后以及左侧面元素添加背景图(可以使用一张图,然后从不同的位置截取),给其他3个面添加背景颜色,并给“底”面添加阴影效果:

?

?

CSS Code复制内容到剪贴板
  1. .front?{? ??
  2. transform:?translateZ(9.1px);? ??
  3. background:?url("//wow.techbrood.com/uploads/160301/mysql.png")?top?rightright;? ??
  4. background-size:?auto?100%;? ??
  5. }? ??
  6. .back?{? ??
  7. transform:?rotateY(180deg)?translateZ(9.1px);? ??
  8. background:?url("//wow.techbrood.com/uploads/160301/mysql.png")?top?left;? ??
  9. background-size:?auto?100%;? ??
  10. }? ??
  11. .top?{? ??
  12. transform:?rotateX(90deg)?rotateZ(90deg)?translateZ(98.8px)?translateY(-89.7px);? ??
  13. background:?#fafafa;? ??
  14. width:?18.2px;? ??
  15. height:?197.6px;? ??
  16. }? ??
  17. .bottombottom?{? ??
  18. transform:?rotateX(-90deg)?rotateZ(90deg)?translateZ(161.2px)?translateY(-89.7px);? ??
  19. background:?#ccc;? ??
  20. width:?18.2px;? ??
  21. height:?197.6px;? ??
  22. -webkit-filter:?drop-shadow(0?0?26px?rgba(0,?0,?0,?0.75));? ??
  23. }? ??
  24. .left?{? ??
  25. transform:?rotateY(-90deg)?translateZ(9.1px);? ??
  26. background:?url("//wow.techbrood.com/uploads/160301/mysql.png")?top?center;? ??
  27. background-size:?auto?100%;? ??
  28. width:?18.2px;? ??
  29. }? ??
  30. .rightright?{? ??
  31. transform:?rotateY(90deg)?translateZ(188.5px);? ??
  32. background:?#ddd;? ??
  33. background-size:?auto?100%;? ??
  34. width:?18.2px;? ??
  35. }??

这样我们就实现了一个逼真的3D书本视觉模型。
3. 添加旋转动画
这个比较简单,使用rotateY方法就可以。

?

?

CSS Code复制内容到剪贴板
  1. @-webkit-keyframes?rotate?{? ??
  2. 0%?{? ??
  3. transform:?rotateY(0)?translateX(-18.2px);? ??
  4. }? ??
  5. 100%?{? ??
  6. transform:?rotateY(360deg)?translateX(-18.2px);? ??
  7. }? ??
  8. }??

?

最终的效果图如下:

纯CSS3如何实现3D旋转书本效果?3D旋转书本效果其实很简单,它不需要复杂的建模过程,仅仅使用图片和CSS3的一些变换即可实现。


原文链接:https://js.aizhan.com/web_authoring/css/8533.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:选择CSS常用选择器的方法

下一篇:IE6的CSS Hack编写需注意什么