javascript - 动态 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 个元素最适合这个旋转木马，更多的元素会因为每边的旋转而产生一些视觉变化。