您现在的位置是：网站首页> 编程资料编程资料

CSS3 3D制作实战案例分析_css3_CSS_网页制作_

2021-09-12 898人已围观

简介 这篇文章主要为大家详细分析了CSS3 3D制作实战案例分析，更好的巩固CSS3 3D的知识，理解3D的制作和实现原理,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Documenttitle>  
  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.      

    上一篇：利用CSS3实现炫酷的飞机起飞动画_css3_CSS_网页制作_

    下一篇：DIV+CSS实现带三角箭头的提示框 _Div+CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网