首页 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
资讯 业界资讯 软件杂谈 编程开发 网站建设 网络观查 搜索引擎 移动应用 网站运营 网络地图
开发 移动开发 Web前端 架构设计 编程语言 互联网 数据库 系统运维 云计算 开发杂谈
[移动开发] 纯CSS实现3D图像轮转
纯CSS实现3D图像轮转

CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先。
首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图像,每个poster中有三个face,分别用来承载三个图像。
[html] view plaincopy 在CODE上查看代码片
派生到我的代码片

  1. <div class="billboard">  
  2.     <div class="poster">  
  3.         <div class="face panel1 p1"></div>  
  4.         <div class="face panel2 p1"></div>  
  5.         <div class="face panel3 p1"></div>  
  6.     </div>  
  7.     <div class="poster">  
  8.         <div class="face panel1 p2"></div>  
  9.         <div class="face panel2 p2"></div>  
  10.         <div class="face panel3 p2"></div>  
  11.     </div>  
  12.     <div class="poster">  
  13.         <div class="face panel1 p3"></div>  
  14.         <div class="face panel2 p3"></div>  
  15.         <div class="face panel3 p3"></div>  
  16.     </div>  
  17.     <div class="poster">  
  18.         <div class="face panel1 p4"></div>  
  19.         <div class="face panel2 p4"></div>  
  20.         <div class="face panel3 p4"></div>  
  21.     </div>  
  22.     <div class="poster">  
  23.         <div class="face panel1 p5"></div>  
  24.         <div class="face panel2 p5"></div>  
  25.         <div class="face panel3 p5"></div>  
  26.     </div>  
  27.     <div class="poster">  
  28.         <div class="face panel1 p6"></div>  
  29.         <div class="face panel2 p6"></div>  
  30.         <div class="face panel3 p6"></div>  
  31.     </div>  
  32.     <div class="poster">  
  33.         <div class="face panel1 p7"></div>  
  34.         <div class="face panel2 p7"></div>  
  35.         <div class="face panel3 p7"></div>  
  36.     </div>  
  37.     <div class="poster">  
  38.         <div class="face panel1 p8"></div>  
  39.         <div class="face panel2 p8"></div>  
  40.         <div class="face panel3 p8"></div>  
  41.     </div>  
  42.     <div class="poster">  
  43.         <div class="face panel1 p9"></div>  
  44.         <div class="face panel2 p9"></div>  
  45.         <div class="face panel3 p9"></div>  
  46.     </div>  
  47.     <div class="poster">  
  48.         <div class="face panel1 p10"></div>  
  49.         <div class="face panel2 p10"></div>  
  50.         <div class="face panel3 p10"></div>  
  51.     </div>  
  52. </div>  

CSS文件这里我们用到了sass,用的是scss语法。
[css] view plaincopy 在CODE上查看代码片
派生到我的代码片

  1. //变量初始化  
  2. //图像分块个数,如要更改,html需要进行相应的修改  
  3. $numPoster:10;   
  4.   
  5. //轮换图像个数,如要更改,html需要进行相应的修改  
  6. $numFace:3;   
  7.   
  8. //图像宽度   
  9. $width:600px;   
  10.   
  11. //图像高度   
  12. $height:320px;   
  13.   
  14. //盒子的设置  
  15. .billboard {    
  16.     width:$width;    
  17.     margin:100px auto;    
  18. }   
  19.   
  20. //图像条左浮动   
  21. .poster {    
  22.     float:left;    
  23.     width:$width/$numPoster;    
  24.     height:$height;    
  25. }  
  26.   
  27. //图像条面的统一设置,绝对定位、3d动画设置    
  28. .face {    
  29.     position:absolute;    
  30.     height:$height;    
  31.     width:$width/$numPoster;    
  32.     transform-origin:50% 50% -17px;    
  33.     backface-visibilityhidden;    
  34.     transform-style:preserve-3d;    
  35.     perspective:350px;    
  36. }    
  37.   
  38. //图像条面分别设置背景图像、动画  
  39. @for $i from 1 through $numFace{    
  40.   .poster .panel#{$i} {    
  41.     background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);    
  42.     transform:transformY(360deg/$numFace*($i - 1));    
  43.     animation: rotateMe#{$i} 10s infinite;    
  44.   }    
  45.   @keyframes rotateMe#{$i} {    
  46.     0% {    
  47.         transform:rotateY(360deg/$numFace*($i - 1));    
  48.     }    
  49.     9% {    
  50.         transform:rotateY(360deg/$numFace*($i - 1));    
  51.     }    
  52.     24% {    
  53.         transform:rotateY(360deg/$numFace*($i));    
  54.     }    
  55.     42% {    
  56.         transform:rotateY(360deg/$numFace*($i));    
  57.     }    
  58.     57% {    
  59.         transform:rotateY(360deg/$numFace*($i + 1));    
  60.     }    
  61.     75% {    
  62.         transform:rotateY(360deg/$numFace*($i + 1));    
  63.     }    
  64.     90% {    
  65.         transform:rotateY(360deg/$numFace*($i + 2));    
  66.     }    
  67.     100% {    
  68.         transform:rotateY(360deg/$numFace*($i + 2));    
  69.     }    
  70.   }    
  71. }   
  72.   
  73. //图像条面的背景偏移  
  74. @for $i from 1 through $numPoster {    
  75.   .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}    
  76. }    

使用sass可以使得代码结构清晰,逻辑性强,请大家研读提升!

上一篇:硬币反转效果
下一篇:

 此文从网络中自动搜索生成,不代表本网站赞成被搜索网站的内容或立场    查看原文
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年9日历
2018-9-25 18:41:15
 
  网站联系 软件世界网-www.sjsjw.com ©2014 蜀ICP备06016416号 三峰网旗下网站