纯CSS3完成三d转动书籍实际效果

日期:2020-10-30 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

有1些前沿的电子商务网站早已刚开始应用三d实体模型来展现产品并适用线上订制,而在其中书籍的展现是最为简易的1种,不用繁杂的模型全过程,应用照片和CSS3的1些转换便可完成更好的展现实际效果,简约而好用。
书籍的三d实体模型是全部产品中最为简易的,由于其实质上便是1个立方体(cube),只是带有封面/封底和左边封条。 因此要结构1个三d书籍展现,难题就被溶解为结构1个立方体+转动+照片情况。
1. 结构1个立方体
要建立1个立方体,最先大家必须建立1个虚似的3维视觉效果室内空间,这能够根据设定宽容器元素的perspective特性得到。


CSS Code拷贝內容到剪贴板
  1. .stage {    
  2. width200px;    
  3. height260px;    
  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>   
接着,大家在宽容器元素里边加上1个立方体元素,6个边(左右上下和前后左右),之因此应用figure,是由于必须适用贴图。
大家必须依据书籍的厚度和长宽来明确立方体各个面的座标部位,在本例中所用书籍实体模型(1本MySQL书)的肯定厚度为18.2px,高宽比260px,宽度197.6px。
那末依据简易的几何图形专业知识,前后左右面间距立方体管理中心的间距为18.2/2=9.1px,在其中“后”元素必须再旋转1下(即“背”以往)。
CSS Code拷贝內容到剪贴板
  1. .front {    
  2. transform: translateZ(9.1px);    
  3. }    
  4. .back {    
  5. transform: rotateY(180deg) translateZ(9.1px);    
  6. }   
用相近的测算方式,大家能够把别的4条边置放(平移+转动转换)到各有的部位,从而组装成1个虚似的立方体。
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(⑻9.7px);    
  9. width: 18.2px;    
  10. height: 197.6px;    
  11. }    
  12. .bottombottom {    
  13. transform: rotateX(⑼0deg) rotateZ(90deg) translateZ(161.2px) translateY(⑻9.7px);    
  14. }    
  15. .left {    
  16. transform: rotateY(⑼0deg) translateZ(9.1px);    
  17. width: 18.2px;    
  18. }    
  19. .rightright {    
  20. transform: rotateY(90deg) translateZ(188.5px);    
  21. width: 18.2px;    
  22. }  
2. 加上封面
接着大家给前后左右和左边面元素加上情况图(可使用1张图,随后从不一样的部位截取),给别的3个面加上情况色调,并给“底”面加上黑影实际效果:
CSS Code拷贝內容到剪贴板
  1. .front {    
  2. transform: translateZ(9.1px);    
  3. backgroundurl("//wow.techbrood.com/uploads/160301/mysql.png"top rightright;    
  4. background-sizeauto 100%;    
  5. }    
  6. .back {    
  7. transform: rotateY(180deg) translateZ(9.1px);    
  8. backgroundurl("//wow.techbrood.com/uploads/160301/mysql.png"top left;    
  9. background-sizeauto 100%;    
  10. }    
  11. .top {    
  12. transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(⑻9.7px);    
  13. background#fafafa;    
  14. width: 18.2px;    
  15. height: 197.6px;    
  16. }    
  17. .bottombottom {    
  18. transform: rotateX(⑼0deg) rotateZ(90deg) translateZ(161.2px) translateY(⑻9.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(⑼0deg) translateZ(9.1px);    
  26. backgroundurl("//wow.techbrood.com/uploads/160301/mysql.png"top center;    
  27. background-sizeauto 100%;    
  28. width: 18.2px;    
  29. }    
  30. .rightright {    
  31. transform: rotateY(90deg) translateZ(188.5px);    
  32. background#ddd;    
  33. background-sizeauto 100%;    
  34. width: 18.2px;    
  35. }  
这样大家就完成了1个真实的三d书籍视觉效果实体模型。
3. 加上转动动漫
这个较为简易,应用rotateY方式便可以。
CSS Code拷贝內容到剪贴板
  1. @-webkit-keyframes rotate {    
  2. 0% {    
  3. transform: rotateY(0) translateX(⑴8.2px);    
  4. }    
  5. 100% {    
  6. transform: rotateY(360deg) translateX(⑴8.2px);    
  7. }    
  8. }  

最后的实际效果图以下:

有关CSS3完成三d转动书籍 的所有內容网编就给大伙儿详细介绍这么多,期待对大伙儿有一定的协助!
原文:http://blog.csdn.net/iefreer/article/details/50931478