CSS3 三d制做实战演练实例剖析

日期：2021-01-20 类型：科技新闻 

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

1、序言
 
上1节，详细介绍了基本的CSS3 三d动漫基本原理完成，也举了1个小小的的事例来演试，可是有盆友跟我私信说想看看1些有关CSS3 三d的案例，因此在这里以便考虑1下大伙儿的要求，另外也以便之后可以更好的推进CSS3 三d的专业知识，因此在这里写下这篇博文，期待可以协助你更好的了解三d的制做和完成基本原理，另外也欢迎各位小伙子伴对文中的不正确给予纠正 
 
2、新手入门实例剖析
 
这里先说1说我的整体规划，我准备先从新手入门级的实例下手，随后先后递推，最终要做到的实际效果是，了解完全部的事例的设计方案思路，基础上CSS3⑶D制做就可以够无拘无束。
 
1、矩形框照片滚翻实际效果
 
这个实际效果较为简易，因此在这里就很少做解释了，先来备考1下上1节说的要建立1个三d自然环境，大家必须建立1个“灯光效果”，“舞台”，“演员”(非常于perspective、preserve⑶d、image)，不清晰的小伙子伴请看这里,实际的编码以下：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Document</title>  
  6.     <style type="text/css">  
  7.         div div img{   
  8.             width:300px;   
  9.             height:300px;   
  10.             position:absolute;   
  11.             /* -webkit-transition: all 0.8s; */   
  12.         }   
  13.         div div{   
  14.             -webkit-transition: all 1s;   
  15.         }   
  16.         #img1{   
  17.             -webkit-transform: translateZ(150px);   
  18.             /* -webkit-transition: all 0.8s; */   
  19.         }   
  20.         #img2{   
  21.             -webkit-transform: rotateX(⑼0deg) translateZ(150px);   
  22.             /* -webkit-transition: all 0.8s; */   
  23.         }   
  24.         #img3{   
  25.             -webkit-transform: rotateZ(180deg) translateZ(⑴50px);   
  26.         }   
  27.         #img4{   
  28.             -webkit-transform: rotateX(90deg) translateZ(150px);   
  29.         }   
  30.         #img5{   
  31.             -webkit-transform:rotateY(90deg) translateZ(150px);   
  32.         }   
  33.         #img6{   
  34.             -webkit-transform: rotateY(⑼0deg) translateZ(150px);   
  35.         }   
  36.         /* div div:hover{   
  37.             -webkit-transform: rotateX(270deg);   
  38.         } */   
  39.     </style>  
  40. </head>  
  41. <body>  
  42.     <div style="margin-left: 100px;height:300px;width:300px;position:absolute;perspective: 1000px;">  
  43.         <div id="box" style="transform-style: preserve⑶d;height:300px;width:300px;position: relative;">  
  44.             <img id="img1" src="1.jpg" />  
  45.             <img id="img2" src="2.jpg" />  
  46.             <img id="img3" src="3.jpg" />  
  47.             <img id="img4" src="4.jpg" />  
  48.             <img id="img5" src="5.jpg" />  
  49.             <img id="img6" src="6.jpg" />  
  50.         </div>  
  51.     </div>  
  52.     <div style="margin-left: 700px;margin-top: 100px;">  
  53.         <input id="btn1" type="button" value="向上旋转90度" />  
  54.         <input id="btn2" type="button" name="" value="向左旋转90度" />  
  55.         <input id="btn3" type="button" value="向右旋转90度" />  
  56.         <input id="btn4" type="button" name="" value="向下旋转90度" />  
  57.     </div>  
  58.     <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>  
  59.     <script>  
  60.         var x=0;   
  61.         var y=0;   
  62.         var box=$("#box");   
  63.         $('#btn1').on("click",function(){   
  64.             var value=90+x*90;   
  65.             box.css("-webkit-transform","rotateX("+value+"deg)");   
  66.             x++;   
  67.         });   
  68.         $('#btn2').on("click",function(){   
  69.             var value=y*90+90;   
  70.             box.css("-webkit-transform","rotateY("+value+"deg)");   
  71.             y++;   
  72.         });   
  73.         $('#btn3').on("click",function(){   
  74.             y--;   
  75.             var value=y*90;   
  76.             box.css("-webkit-transform","rotateX("+value+"deg)");   
  77.   
  78.         });   
  79.         $('#btn4').on("click",function(){   
  80.             x--;   
  81.             var value=x*90;   
  82.             box.css("-webkit-transform","rotateX("+value+"deg)");   
  83.                
  84.         });   
  85.     </script>  
  86. </body>  
  87. </html>    
  88.   

剖析
 
尽管这个思路粗浅易懂，可是做为本文的第1个事例還是想为大伙儿尽可能清楚的剖析清晰，
 
1、最先大家建立了1个“灯光效果”persepctive用来造成三d转变的实际效果的
 
2、随后大家建立了1个“舞台”  transform-style: preserve⑶d
 
3、建立“演员”，这里的演员指的是每张的照片，在建立的情况下要依据你最后要展现的形状开展模型，也就是平移转动之类的实际操作
 
脚本制作的撰写：在撰写脚本制作的情况下有1点是必须留意的，当你把照片转动90度的情况下，假如第2次還是设定90度，那末这个照片是不容易产生转变的，由于照片的转变(转动)是以原始部位为标准的，因此相对原始部位两次的90度全是1样的因此沒有任何的实际效果。这个在制做的情况下，注意1下便可
 
2、矩形框全自动转动实际效果
 
依照上面的事例开展整改，要完成全自动的转动实际上便是界定1个keyframes的健身运动标准，随后在把这个keyframes套接到animation中，便可完成CSS全自动转动的作用
 
一部分的CSS3编码

CSS Code拷贝內容到剪贴板
  1. div div{   
  2.             animation:route 10s infinite ease-in-out;    
  3.         }   
  4. //keyframes健身运动标准   
  5. @-webkit-keyframes route{   
  6.             0%{   
  7.                 -webkit-transform:rotateX(90deg);   
  8.             }   
  9.             25%{   
  10.                 -webkit-transform:rotateX(180deg) rotateY(90deg) rotateZ(90deg);   
  11.             }   
  12.             50%{   
  13.                 -webkit-transform:rotateX(270deg) rotateY(180deg) rotateZ(180deg);   
  14.             }   
  15.             75%{   
  16.                 -webkit-transform:rotateX(360deg) rotateY(270deg) rotateZ(270deg);   
  17.             }   
  18.         }   

展现实际效果：

 3、CSS3 三d应用殊效制做与剖析
 
 1、仿真模拟卡牌旋转实际效果
 
这个我就很少说如何制做了，先上实际效果，照片是来源于于蜗牛的，如有侵害请告之

 

这个尽管是分类到三d的范畴内，可是在应用的情况下因为不必须造成平行4边形的转换实际效果(这个的实际实际效果详见博主的此外1篇博文)，因此不必须应用perspective这个特性，可是的确必须应用到CSS3 三d普遍实际效果中的旋转特性(rotate[X,Y,Z]),这个的实际基本原理也是简易，可是在应用的情况下有两点是必须留意的。
 
1）、由于转动是相对卡牌的总体的转动，也便是两个面都要转动，因此hover恶性事件要相对卡牌总体，假如是相对某1个面的话，那末会出現1个面转动，而此外1个面不转动的状况
 
2）、在制做的全过程中应用了1个较为罕见的特性：backface-visibility，这个特性是以便见照片的反面设定为不能见，从而做到完成旋转的实际效果
 
实际编码见文章内容最终
 
2、CSS3 三d轮播
 
说到CSS3 三d轮播关键大家能够分为这样的3类，1类是全自动播发的轮播图，此外1类是回应点一下恶性事件的轮播图，第3类是二者的融合，即全自动播发又回应点一下恶性事件，这里大家关键探讨的是前二者，第3对比较繁杂这里大家就很少做解释，之后还有机会再来跟大伙儿讨论讨论
 
2.1 全自动轮播图
 
这个的基本原理大家早已在前面中数次提到了，可是各位要留意1个地区，在keyframes中设定如：
 
@keyframes test{
   o%,
   12.5%:{………………}
}

这样的1种方式能够完成轮播图的短暂性滞留。
 
好了看1下实际效果了：

2.2 CSS3开启轮播图
 
关键的基本原理是根据分辨点一下的次数，随后是给照片父类加上转动的特性，这样这个作用就完成了，大家对上面的事例开展改善，实际效果以下所示 

4、编码免费下载
 
 这1次编码开展了转移，从本来自身的服务器转移到了git服务器，git的免费下载详细地址：https://github.com/leslieSie/CSS3_example/tree/develop

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

原文连接：http://www.cnblogs.com/st-leslie/p/5791714.html

上一篇：CSS适配难题之HACK技术性 返回下一篇：没有了