동적 CSS 캐 러셀 크기가 변경됩니다.

Question

다양한 소스를 사용하여 회전식 작업을하고 있습니다. 지금 작업 데모가 있지만 회전 목마 안에있는 항목의 양을 변경하면 크기가 변경된다는 것을 알지 못합니다.

누군가가 내게 무슨 일이 일어 났는지 설명 할 수 있습니까? 더 자세히 축소 된 것처럼 보입니다.

http://codepen.io/sereal_killer/pen/zBPJAj

CSS :

.container-window { 
    top: 0px; 
    padding: 0px; 
    height: 170px; 
    border: 1px solid red; 
    position: relative; 
    width: 300px; 
    overflow: hidden; 
    margin: auto; 
} 

.container { 
    top: 15px; 
    margin: 0 auto; 
    width: 210px; 
    height: 140px; 
    position: relative; 
    perspective: 1000px; 
} 

#carousel { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    transition: transform 1s; 
} 

#carousel .item{ 
    margin: 0 auto; 
    display: block; 
    position: absolute; 
    width: 206px; 
    height: 116px; 
    left:0px; 
    top: 10px; 
    border: 2px solid black; 
    text-align:center; 
    background-color:grey; 
} 

.next, .prev { 
    color: #444; 
    position: absolute; 
    top: 100px; 
    padding: 1em 2em; 
    cursor: pointer; 
    background: #CCC; 
    border-radius: 5px; 
    border-top: 1px solid #FFF; 
    box-shadow: 0 5px 0 #999; 
    transition: box-shadow 0.1s, top 0.1s; 
} 

.next:hover, .prev:hover { color: #000; } 
.next:active, .prev:active { 
    top: 100px; 
    box-shadow: 0 1px 0 #999; 
} 


.next { right: 5em; } 
.prev { left: 5em; } 

JS

var carousel = document.getElementById("carousel") 
var currdeg = 0; 

var prev = document.getElementsByClassName("prev"); 
var next = document.getElementsByClassName("next"); 

var items = document.getElementsByClassName("item"); 
var degreeToRotate = 360/items.length 

var tz = Math.round((items[0].offsetWidth/2)/
    Math.tan(((Math.PI * 2)/items.length)/2)); 

next[0].addEventListener("click", function() { rotate("n") }); 
prev[0].addEventListener("click", function() { rotate("p") }); 

//$(".next").on("click", { d: "n" }, rotate); 
//$(".prev").on("click", { d: "p" }, rotate); 

setItemPos(); 

function setItemPos() { 
    for (var i = 0; i < items.length; i++) { 
     items[i].style.transform = "rotateY(" + (i*degreeToRotate) + "deg) translateZ(" + tz + "px)"; 
    } 
} 


console.log(degreeToRotate); 
function rotate(e) { 
    if (e == "n") { 
     currdeg = currdeg - degreeToRotate; 
    } 
    if (e == "p") { 
     currdeg = currdeg + degreeToRotate; 
    } 

    carousel.style.transform = "rotateY(" + currdeg + "deg)"; 
    console.log("degree:" + currdeg); 
} 

Answer 1

내가 4 개 항목 추측이 회전 목마에 대한 완벽한, 더 때문에 각면의 회전의 시각적 인 변화를 만들 것입니다.