代码如下：
<html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width, initial-scale=1.0"> <title>CSS3 3D transforms-旋转木马</title> <link type="text/css" href="https://www.htmleaf.com/pins/1412/201502062108/css/style.css" > <style media="screen"> .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;} </style> <!--[if IE]> <script src="https://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <section> <div> <figure>1</figure> <figure>2</figure> <figure>3</figure> <figure>4</figure> <figure>5</figure> <figure>6</figure> <figure>7</figure> <figure>8</figure> <figure>9</figure> <figure>10</figure> <figure>11</figure> <figure>12</figure> <figure>13</figure> <figure>14</figure> <figure>15</figure> <figure>16</figure> <figure>17</figure> <figure>18</figure> <figure>19</figure> <figure>20</figure> </div> </section> <section> <p> <label for="panel-count">个数</label> <input value="9" min="3" max="20" type="range"> <span></span></p> <p> <button data-increment="-1">上一页</button> <button data-increment="1">下一页</button> </p> <p> <button>横竖切换</button> </p> <p> <button>背面可见切换</button> </p> </section> </div> <script src="https://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 < this.panelCount; 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)'; }; var init = function() { var carousel = new Carousel3D( document.getElementById('carousel') ), panelCountInput = document.getElementById('panel-count'), axisButton = document.getElementById('toggle-axis'), navButtons = document.querySelectorAll('#navigation button'), onNavButtonClick = function( event ){ var increment = 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 (var i=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> <p>对不起,你的浏览器不支持CSS 3D transforms。</p> </body></html>