js实现旋转效果|js实现旋转木马效果

时间:2021-07-28  来源:css3教程  阅读:

效果图:

代码如下:

 

 代码如下

 

 

 

 CSS3 3D transforms-旋转木马

 

 

   .container {

    width: 210px;

    height: 140px;

    position: relative;

    margin: 50px auto 40px;

    border: 1px solid #CCC;

    -webkit-perspective: 1100px;

     -moz-perspective: 1100px;

      -o-perspective: 1100px;

        perspective: 1100px;

   }

   #carousel {

    width: 100%;

    height: 100%;

    position: absolute;

    -webkit-transform-style: preserve-3d;

     -moz-transform-style: preserve-3d;

      -o-transform-style: preserve-3d;

        transform-style: preserve-3d;

   }

   .ready #carousel {

    -webkit-transition: -webkit-transform 1s;

     -moz-transition: -moz-transform 1s;

      -o-transition: -o-transform 1s;

        transition: transform 1s;

   }

   #carousel.panels-backface-invisible figure {

    -webkit-backface-visibility: hidden;

     -moz-backface-visibility: hidden;

      -o-backface-visibility: hidden;

        backface-visibility: hidden;

   }

   #carousel figure {

    display: block;

    position: absolute;

    width: 186px;

    height: 116px;

    left: 10px;

    top: 10px;

    border: 2px solid black;

    line-height: 116px;

    font-size: 80px;

    font-weight: bold;

    color: white;

    text-align: center;

   }

   .ready #carousel figure {

    -webkit-transition: opacity 1s, -webkit-transform 1s;

     -moz-transition: opacity 1s, -moz-transform 1s;

      -o-transition: opacity 1s, -o-transform 1s;

        transition: opacity 1s, transform 1s;

   }

 #options{

  margin-top: 200px;

  width: 100%;

  text-align: center;

 }

 #options button{padding: 0.5em 1.5em;border: 2px solid #6699cc;background: #fff;}

  

 

 

   

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

   

  

  

   

    个数

    

   

   

    上一页

    下一页

   

   

    横竖切换

   

   

    背面可见切换

   

  

 

 <scriptsrc="http://www.htmleaf.com/pins/1412/201502062108/js/utils.js"></script>

 <script>

  var transformProp = Modernizr.prefixed('transform');

  function Carousel3D ( el ) {

   this.element = el;

   this.rotation = 0;

   this.panelCount = 0;

   this.totalPanelCount = this.element.children.length;

   this.theta = 0;

   this.isHorizontal = true;

  }

  Carousel3D.prototype.modify = function() {

   var panel, angle, i;

   this.panelSize = this.element[ this.isHorizontal ? 'offsetWidth' : 'offsetHeight' ];

   this.rotateFn = this.isHorizontal ? 'rotateY' : 'rotateX';

   this.theta = 360 / this.panelCount;

   // do some trig to figure out how big the carousel

   // is in 3D space

   this.radius = Math.round( ( this.panelSize / 2) / Math.tan( Math.PI / this.panelCount ) );

   for ( i = 0; i

    panel=this.element.children[i];

    angle=this.theta * i;

    panel.style.opacity=1;

    panel.style.backgroundColor='hsla('+ angle + ', 100%, 50%, 0.8)';

    // rotate panel, then push it out in 3D space

    panel.style[ transformProp ] = this.rotateFn + '(' + angle + 'deg) translateZ(' + this.radius + 'px)';

   }

   // hide other panels

   for ( ; i < this.totalPanelCount; i++ ) {

    panel=this.element.children[i];

    panel.style.opacity=0;

    panel.style[ transformProp ] = 'none';

   }

   // adjust rotation so panels are always flat

   this.rotation=Math.round( this.rotation / this.theta ) * this.theta;

   this.transform();

  };

  Carousel3D.prototype.transform=function() {

   // push the carousel back in 3D space,

   // and rotate it

   this.element.style[ transformProp ] = 'translateZ(-' + this.radius + 'px) ' + this.rotateFn + '(' + this.rotation + 'deg)';

  };

  varinit=function() {

   varcarousel=newCarousel3D( document.getElementById('carousel') ),

     panelCountInput=document.getElementById('panel-count'),

     axisButton=document.getElementById('toggle-axis'),

     navButtons=document.querySelectorAll('#navigation button'),

     onNavButtonClick=function( event ){

      varincrement=parseInt( event.target.getAttribute('data-increment') );

      carousel.rotation += carousel.theta * increment * -1;

      carousel.transform();

     };

   // populate on startup

   carousel.panelCount=parseInt( panelCountInput.value, 10);

   carousel.modify();

   axisButton.addEventListener( 'click', function(){

    carousel.isHorizontal = !carousel.isHorizontal;

    carousel.modify();

   }, false);

   panelCountInput.addEventListener( 'change', function( event ) {

    carousel.panelCount=event.target.value;

    carousel.modify();

   }, false);

   for (vari=0; i < 2; i++) {

    navButtons[i].addEventListener( 'click', onNavButtonClick, false);

   }

   document.getElementById('toggle-backface-visibility').addEventListener( 'click', function(){

    carousel.element.toggleClassName('panels-backface-invisible');

   }, false);

   setTimeout( function(){

    document.body.addClassName('ready');

   }, 0);

  };

  window.addEventListener( 'DOMContentLoaded', init, false);

 </script>

 对不起,你的浏览器不支持CSS 3D transforms。

 

js实现旋转效果|js实现旋转木马效果

http://m.bbyears.com/css/132472.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新