Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 154226
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
CSS3+HTML5实现旋转木马特效

分类： HTML5

2016-05-31 16:40:35

关键部分代码的解释都在代码中:

点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>3D旋转木马</title>
  6.     <style>
  7.       *{
  8.           padding:0;
  9.           margin:0;
  10.       }
  11.       #view{
  12.           position: relative;
  13.           top:200px;
  14.           left:300px;
  15.           width: 200px;
  16.           height: 150px;
  17.           perspective: 1000px;
  18.       }
  19.       #view1{
  20.           position: relative;
  21.           top:200px;
  22.           left:900px;
  23.           width: 200px;
  24.           height: 150px;
  25.           perspective: 1500px;
  26.       }
  27.       #contain,#contain1{
  28.           position: absolute;
  29.           width: 100%;
  30.           height: 100%;
  31.           transform-style:preserve-3d;
  32.           transition:transform 2s;
  33.       }
  34.       #contain figure,#contain1 figure{
  35.           position: absolute;
  36.         width: 178px;
  37.           height: 128px;
  38.           display: block;
  39.       }
  40.       #contain figure img,#contain1 figure img{
  41.           width: 158px;
  42.           height: 118px;
  43.           position: absolute;
  44.           top:10px;
  45.           left: 10px;
  46.       }
  47.       #contain figure:nth-child(1){
  48.           transform:rotateY(0deg) translateZ(245px);
  49.       }
  50.       #contain figure:nth-child(2){
  51.           transform:rotateY(40deg) translateZ(245px);
  52.       }
  53.       #contain figure:nth-child(3){
  54.           transform:rotateY(80deg) translateZ(245px);
  55.       }
  56.       #contain figure:nth-child(4){
  57.           transform:rotateY(120deg) translateZ(245px);
  58.       }
  59.       #contain figure:nth-child(5){
  60.           transform:rotateY(160deg) translateZ(245px);
  61.       }
  62.       #contain figure:nth-child(6){
  63.           transform:rotateY(200deg) translateZ(245px);
  64.       }
  65.       #contain figure:nth-child(7){
  66.           transform:rotateY(240deg) translateZ(245px);
  67.       }
  68.       #contain figure:nth-child(8){
  69.           transform:rotateY(280deg) translateZ(245px);
  70.       }
  71.       #contain figure:nth-child(9){
  72.           transform:rotateY(320deg) translateZ(245px);
  73.       }
  74.       /*九张图片，所以每张图片围绕Y轴旋转40度，然后让每个figure都离中心位置245px，245这个数字
  75.       是根据图片的宽度来的，具体算法是--图片宽度除以2，再除以tan(20),自己可以画张多边形研究一下*/
  76.       #contain1 figure:nth-child(1){
  77.           transform:rotateX(0deg) translateZ(245px);
  78.       }
  79.       #contain1 figure:nth-child(2){
  80.           transform:rotateX(40deg) translateZ(245px);
  81.       }
  82.       #contain1 figure:nth-child(3){
  83.           transform:rotateX(80deg) translateZ(245px);
  84.       }
  85.       #contain1 figure:nth-child(4){
  86.           transform:rotateX(120deg) translateZ(245px);
  87.       }
  88.       #contain1 figure:nth-child(5){
  89.           transform:rotateX(160deg) translateZ(245px);
  90.       }
  91.       #contain1 figure:nth-child(6){
  92.           transform:rotateX(200deg) translateZ(245px);
  93.       }
  94.       #contain1 figure:nth-child(7){
  95.           transform:rotateX(240deg) translateZ(245px);
  96.       }
  97.       #contain1 figure:nth-child(8){
  98.           transform:rotateX(280deg) translateZ(245px);
  99.       }
  100.       #contain1 figure:nth-child(9){
  101.           transform:rotateX(320deg) translateZ(245px);
  102.       }
  103.       /*第二种旋转木马效果就是让图片围绕X轴旋转40度*/
  104.       #button{
  105.           width: 200px;
  106.           position: relative;
  107.           top:100px;
  108.           left: 400px;
  109.           text-align: center;
  110.       }
  111.       #previous,#next{
  112.           padding:5px;
  113.           font-size: 16px;
  114.           background: #98f898;
  115.       }
  116.     </style>
  117.     <script src="jquery.js"></script>
  118. </head>
  119. <body>
  120.     <div id="view">
  121.         <div id="contain">
  122.             <figure><img src="images/1.jpg"></figure>
  123.             <figure><img src="images/2.jpg"></figure>
  124.             <figure><img src="images/3.jpg"></figure>
  125.             <figure><img src="images/4.jpg"></figure>
  126.             <figure><img src="images/5.jpg"></figure>
  127.             <figure><img src="images/6.jpg"></figure>
  128.             <figure><img src="images/7.jpg"></figure>
  129.             <figure><img src="images/6.jpg"></figure>
  130.             <figure><img src="images/9.jpg"></figure>
  131.         </div>
  132.     </div>
  133.     <div id="view1">
  134.         <div id="contain1">
  135.             <figure><img src="images/1.jpg"></figure>
  136.             <figure><img src="images/2.jpg"></figure>
  137.             <figure><img src="images/3.jpg"></figure>
  138.             <figure><img src="images/4.jpg"></figure>
  139.             <figure><img src="images/5.jpg"></figure>
  140.             <figure><img src="images/6.jpg"></figure>
  141.             <figure><img src="images/7.jpg"></figure>
  142.             <figure><img src="images/6.jpg"></figure>
  143.             <figure><img src="images/9.jpg"></figure>
  144.         </div>
  145.     </div>
  146.     <div id="button">
  147.         <button id="previous">上一张</button>
  148.         <button id="next">下一张</button>
  149.     </div>
  150.     <script>
  151.      //获得图片偏移中心距离的算法
  152.      // $(function(){
  153.      //     var num=$("#contain figure").length;//图片数量
  154.      //     var w=$("#contain").width();//图片宽度
  155.      //     var deg_n=Math.floor(360/num);//图片需要旋转的角度,用角度的一半可以算出图片离中心的距离
  156.      //     var true_w=w/(2*Math.tan(deg_n/360*Math.PI));//需要把角度转换为弧度角 deg_n/2*2*Math.PI/360;
  157.      //     alert(Math.round(true_w));
  158.      // })


  161.      //jquery 方法
  162.        // $(function(){
  163.        //     $("#contain figure").css("opacity","1")
  164.        //     var n=0;
  165.        //     var total=0;
  166.        // $("#next").click(function(){
  167.        //     n++;
  168.        // total=n*40;
  169.        //     $("#contain").css("transform","rotateY("+(-total)+"deg)");
  170.        //     $("#contain1").css("transform","rotateX("+(-total)+"deg)");
  171.        // })
  172.        // $("#previous").click(function(){
  173.        //     n--;
  174.        //     total=n*40;
  175.        //     $("#contain").css("transform","rotateY("+(-total)+"deg)");
  176.        //     $("#contain1").css("transform","rotateX("+(-total)+"deg)");
  177.        // })
  178.        // })
  179.   

  181.        //原生JS方法
  182.        var figure=document.getElementsByTagName('figure');
  183.        var contain=document.getElementById('contain');
  184.        var contain1=document.getElementById('contain1');
  185.        var previous=document.getElementById('previous');
  186.        var next=document.getElementById('next');
  187.        var n=0,total=0;
  188.        next.addEventListener('click',function(){
  189.            n++;
  190.            total=n*40;    
  191.            contain.style.transform="rotateY("+(-total)+"deg)";
  192.            contain1.style.transform="rotateX("+(-total)+"deg)";
  193.        },false);
  194.        previous.addEventListener('click',function(){
  195.            n--;
  196.            total=n*40;
  197.            contain.style.transform="rotateY("+(-total)+"deg)";
  198.            contain1.style.transform="rotateX("+(-total)+"deg)";
  199.        },false);
  200.        
  201.     </script>
  202. </body>
  203. </html>

阅读(5124) | 评论(0) | 转发(0) |
1

上一篇：CSS实现截图和放大镜效果

下一篇：CSS3+JS实现一款创意时钟效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6