Question

我正在使用各种来源制作旋转木马。我现在有一个工作演示，但我不理解为什么改变旋转木马内的物品数量会使它们的尺寸发生变化。

有人可以向我解释发生了什么事吗？他们似乎缩小了。

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

CSS：

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);
}

JS

{{1}}

Answer 1

我猜这4个项目对于这个旋转木马是完美的，由于每一侧的旋转，更多会有一些视觉上的变化。

动态CSS轮播改变大小

1 个答案: