效果图:
代码如下:
代码如下 | 复制代码 |
.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;}
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); |