3D carousel not working -HTML CSS3

Question

I am new to CSS3 and I was trying to implement a simple 3D Carousel. I don't understand why but it's not working as it should be. Kindly help me with this. Here are the screenshot of the page, html, css, javascript files :

 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

知道了。实际上我忘了在rotateY（）方法中添加deg，即rotateY（“ + theta +” deg）。

3D carousel not working -HTML CSS3

Question

1 answers

solution1
0 ACCPTED 2016-06-01 20:17:59

3D carousel not working -HTML CSS3

Question

1 answers

solution1 0 ACCPTED 2016-06-01 20:17:59

solution1
0 ACCPTED 2016-06-01 20:17:59