华山资源网

CSS3 3D制作实战案例分析
网页制作 2024/11/20 佚名
3 1

一、前言
 
上一节，介绍了基础的CSS3 3D动画原理实现，也举了一个小小的例子来演示，但是有朋友跟我私信说想看看一些关于CSS3 3D的实例，所以在这里为了满足一下大家的需求，同时也为了以后能够更好的巩固CSS3 3D的知识，所以在这里写下这篇博文，希望能够帮助你更好的理解3D的制作和实现原理，同时也欢迎各位小伙伴对文中的错误给予指正 
 
二、入门案例分析
 
这里先说一说我的规划，我打算先从入门级的案例入手，然后依次递推，最后要达到的效果是，理解完所有的例子的设计思路，基本上CSS3-3D制作就能够随心所欲。
 
1、矩形图片翻滚效果
 
这个效果比较简单，所以在这里就不多做解释了，先来复习一下上一节说的要创建一个3D环境，我们需要创建一个“灯光”，“舞台”，“演员”(相当于perspective、preserve-3d、image)，不清楚的小伙伴请看这里,具体的代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  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(-90deg) translateZ(150px);   
  22.             /* -webkit-transition: all 0.8s; */   
  23.         }   
  24.         #img3{   
  25.             -webkit-transform: rotateZ(180deg) translateZ(-150px);   
  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(-90deg) 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-3d;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.   

CSS3 3D制作实战案例分析

分析
 
虽然这个思路浅显易懂，但是作为本文的第一个例子还是想为大家尽量清晰的分析清楚，
 
1、首先我们创建了一个“灯光”persepctive用来产生3D变化的效果的
 
2、然后我们创建了一个“舞台”  transform-style: preserve-3d
 
3、创建“演员”，这里的演员指的是每张的图片，在创建的时候要根据你最终要呈现的形态进行建模，也即是平移旋转之类的操作
 
脚本的编写：在编写脚本的时候有一点是需要注意的，当你把图片旋转90度的时候，如果第二次还是设置90度，那么这个图片是不会发生变化的，因为图片的变化(旋转)是以初始位置为基准的，所以相对于初始位置两次的90度都是一样的所以没有任何的效果。这个在制作的时候，留意一下即可
 
2、矩形自动旋转效果
 
按照上面的例子进行整改，要实现自动的旋转其实就是定义一个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.         }   

展示效果：

CSS3 3D制作实战案例分析

 三、CSS3 3D使用特效制作与分析
 
 1、模拟卡牌翻转效果
 
这个我就不多说怎样制作了，先上效果，图片是来源于蜗牛的，如有侵犯请告知

CSS3 3D制作实战案例分析

 

这个虽然是归类到3D的范围内，但是在使用的时候由于不需要产生平行四边形的变换效果(这个的具体效果详见博主的另外一篇博文)，所以不需要使用perspective这个属性，但是确实需要使用到CSS3 3D常见效果中的翻转属性(rotate[X,Y,Z]),这个的具体原理也是简单，但是在使用的时候有两点是需要注意的。
 
一）、因为旋转是相对于卡牌的整体的旋转，也就是两个面都要旋转，所以hover事件要相对于卡牌整体，如果是相对于某一个面的话，那么会出现一个面旋转，而另外一个面不旋转的现象
 
二）、在制作的过程中使用了一个比较少见的属性：backface-visibility，这个属性是为了见图片的背面设置为不可见，从而达到实现翻转的效果
 
具体代码见文章最后
 
2、CSS3 3D轮播
 
说到CSS3 3D轮播主要我们可以分成这样的三类，一类是自动播放的轮播图，另外一类是响应点击事件的轮播图，第三类是两者的结合，即自动播放又响应点击事件，这里我们主要讨论的是前两者，第三类比较复杂这里我们就不多做解释，以后有机会再来跟大家探讨探讨
 
2.1 自动轮播图
 
这个的原理我们已经在前面中多次提到了，但是各位要注意一个地方，在keyframes中设置如：
 
@keyframes test{
   o%,
   12.5%:{………………}
}

这样的一种形式可以实现轮播图的短暂停留。
 
好了看一下效果了：

CSS3 3D制作实战案例分析

2.2 CSS3触发轮播图
 
主要的原理是通过判断点击的次数，然后是给图片父类添加旋转的属性，这样这个功能就实现了，我们对上面的例子进行改进，效果如下所示 

CSS3 3D制作实战案例分析

四、代码下载
 
 这一次代码进行了迁移，从原本自己的服务器迁移到了git服务器，git的下载地址：https://github.com/leslieSie/CSS3_example/tree/develop

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com