3D 旋转木马不工作 -HTML CSS3

Question

我是 CSS3 的新手，我正在尝试实现一个简单的 3D 轮播。我不明白为什么，但它没有按应有的方式工作。请帮我解决这个问题。这是页面的屏幕截图，html、css、javascript 个文件：

var init= function(){
 console.log("Init Function");
 var carousel=document.getElementById('carousel'),
 navButtons=document.querySelectorAll('nav button'),
 panelCount=carousel.children.length,
 transformProp=Modernizr.prefixed('transform'),
 theta=0,
 onNavButtonClick=function(event){
  var increment=parseInt(event.target.getAttribute('data-increment'));
  theta +=(360/panelCount)*increment* -1;
  carousel.style[transformProp] ='translateZ(-288px) rotateY('+theta+');';
  console.log(panelCount);
  console.log(increment);
  console.log(theta);
  console.log(carousel.style);
  console.log("Inside button click");
 };

 for (var i = 0; i < 2; i++) {
  navButtons[i].addEventListener('click',onNavButtonClick,false);
 };
};
window.addEventListener('DOMContentLoaded',init,false);

body{
 font-family: Helvetica,Arial,sans-serif;
 -webkit-text-size-adjust:none;
 color:#333;
 max-width: 720px;
 min-width: 400px;
 margin: 0 auto;
 padding: 10px;
}

.container{
width: 210px;
height: 140px;
position: relative;
margin: 0 auto 50px;
border: 2px solid #999;
perspective: 200px; 
}

#carousel{
 width: 100%;
 height: 100%;
 position: absolute;
 transform: translateZ(-288px);
 transform-style: preserve-3d;
 transition: transform .5s;
}

#carousel div{
 display: block;
 position: absolute;
 width: 186px;
 height: 116px;
 left: 10px;
 top: 10px;
 border: 2px solid black;
 line-height: 116px;
 font-size: 24px;
 font-weight: normal;
 color: black;
 text-align: center;
}

#carousel div:nth-child(1) {background: hsla(0,75%,50%,0.9);}
#carousel div:nth-child(2) {background: hsla(72,75%,50%,0.9);}
#carousel div:nth-child(3) {background: hsla(144,75%,50%,0.9);}
#carousel div:nth-child(4) {background: hsla(216,75%,50%,0.9);}
#carousel div:nth-child(5) {background: hsla(288,75%,50%,0.9);}

#carousel div:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel div:nth-child(2) {transform: rotateY(72deg) translateZ(288px);}
#carousel div:nth-child(3) {transform: rotateY(144deg) translateZ(288px);}
#carousel div:nth-child(4) {transform: rotateY(216deg) translateZ(288px);}
#carousel div:nth-child(5) {transform: rotateY(288deg) translateZ(288px);}


#options{
 position: relative;
 z-index: 100;
 margin-bottom: 40px;
}


nav{
 width: 250px;
 margin: 0 auto;
}

button{
 width: 70px;
 font-size: 12px;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>3D Carousel</title>
 <link rel="stylesheet" href="/css/carousel.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
</head>
<body>
 <h2>Carousel 1-5 Slide Example</h2>

<section class="container">
 <div id="carousel">
  <div>Menu 1</div>
  <div>Menu 2</div>
  <div>Menu 3</div>
  <div>Menu 4</div>
  <div>Menu 5</div>
 </div>
</section>

<section id="options">
 <nav>
 <button id="previous" data-increment="-1">Previous</button>
 <button id="next" data-increment="1">Next</button>
 </nav>
</section>
<script src="/js/application.js" type="text/javascript"></script> 
</body>
</html>

Answer 1

知道 it.Actually 我忘了在 rotateY() 方法中添加 deg，即 rotateY("+theta+"deg).

3D 旋转木马不工作 -HTML CSS3

3D carousel not working -HTML CSS3

html

javascript

css

modernizr