0
Ich bin neu in CSS3 und habe versucht, ein einfaches 3D-Karussell zu implementieren. Ich verstehe nicht warum, aber es funktioniert nicht so, wie es sein sollte. Bitte hilf mir dabei. Hier sind die Screenshot der Seite, HTML, CSS, Javascript-Dateien:3D-Karussell funktioniert nicht -HTML CSS3
var init= function(){
\t console.log("Init Function");
\t var carousel=document.getElementById('carousel'),
\t navButtons=document.querySelectorAll('nav button'),
\t panelCount=carousel.children.length,
\t transformProp=Modernizr.prefixed('transform'),
\t theta=0,
\t onNavButtonClick=function(event){
\t \t var increment=parseInt(event.target.getAttribute('data-increment'));
\t \t theta +=(360/panelCount)*increment* -1;
\t \t carousel.style[transformProp] ='translateZ(-288px) rotateY('+theta+');';
\t \t console.log(panelCount);
\t \t console.log(increment);
\t \t console.log(theta);
\t \t console.log(carousel.style);
\t \t console.log("Inside button click");
\t };
\t for (var i = 0; i < 2; i++) {
\t \t navButtons[i].addEventListener('click',onNavButtonClick,false);
\t };
};
window.addEventListener('DOMContentLoaded',init,false);body{
\t font-family: Helvetica,Arial,sans-serif;
\t -webkit-text-size-adjust:none;
\t color:#333;
\t max-width: 720px;
\t min-width: 400px;
\t margin: 0 auto;
\t padding: 10px;
}
.container{
width: 210px;
height: 140px;
position: relative;
margin: 0 auto 50px;
border: 2px solid #999;
perspective: 200px; \t
}
#carousel{
\t width: 100%;
\t height: 100%;
\t position: absolute;
\t transform: translateZ(-288px);
\t transform-style: preserve-3d;
\t transition: transform .5s;
}
#carousel div{
\t display: block;
\t position: absolute;
\t width: 186px;
\t height: 116px;
\t left: 10px;
\t top: 10px;
\t border: 2px solid black;
\t line-height: 116px;
\t font-size: 24px;
\t font-weight: normal;
\t color: black;
\t 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{
\t position: relative;
\t z-index: 100;
\t margin-bottom: 40px;
}
nav{
\t width: 250px;
\t margin: 0 auto;
}
button{
\t width: 70px;
\t font-size: 12px;
}<!DOCTYPE html>
<html>
<head>
\t <meta charset="UTF-8">
\t <title>3D Carousel</title>
\t <link rel="stylesheet" href="/css/carousel.css">
\t <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">
\t <div id="carousel">
\t \t <div>Menu 1</div>
\t \t <div>Menu 2</div>
\t \t <div>Menu 3</div>
\t \t <div>Menu 4</div>
\t \t <div>Menu 5</div>
\t </div>
</section>
<section id="options">
\t <nav>
\t <button id="previous" data-increment="-1">Previous</button>
\t <button id="next" data-increment="1">Next</button>
\t </nav>
</section>
<script src="/js/application.js" type="text/javascript"></script> \t
</body>
</html>