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

日期：2021-03-18 类型：科技新闻 

关键词：h5互动游戏，微信h5怎么制作，h5转盘抽奖，h5测试制作，凡科H5

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

上一篇：湛江市网站制作SEO提升的三大行外技术性 返回下一篇：没有了