javascript - 3D carousel not working -HTML CSS3 -
i new css3 , trying implement simple 3d carousel. don't understand why it's not working should be. kindly me this. here screenshot of 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 = 0; < 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>
got it.actually forgot add deg in rotatey() method i.e rotatey("+theta+"deg).
