CSS動態3D旋轉木馬，z軸定位

Question

我正在使用CSS和javascript創建3D輪播。 為了進行測試和開發，我已經在本頁上載了到目前為止的內容： http : //dev.rushfivedesigns.com/

當您進入頁面時，請點擊“初始化”按鈕以將其轉換為3D空間。 默認情況下，它將使用5個面板進行初始化，並且可以使用控件進行更改。

我要解決的問題是：當我增加面板的數量時，與原點的距離會增加，因此面板的可感知尺寸會增加（它們會被炸掉）。 我希望前面板始終保持相同大小，而不管有多少面板。

因此，我希望將前面板保持在3D空間中的靜態位置，而不是將每個面板按x距離推開，然后將其他所有物體推到其后方（希望如此）。

我已經使用angular做了這​​個，但是使用普通的javascript也可以很容易地做到這一點。 以下是相關代碼：

的HTML

<div id="musicPlayer">
    <section class="container">
        <div id="carousel">
            <figure class="something" ng-repeat="item in items">item {{item.someKey}}</figure>
        </div>
    </section>
</div>

的CSS

.container {
    width:300px;
    height:300px;
    position:relative;
    perspective: 1000px;
    margin-left: 400px;
    margin-top:100px;
}

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

#carousel figure {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    border: 2px solid black;
    width: 276px;
    height: 276px;
}

Java腳本

$scope.items = [];

for (var i = 0; i < 5; i++) {
    var filler = {
        someKey: i
    };
    $scope.items.push(filler);
};

$scope.initializeCarousel = function () {
    var carousel = document.getElementById('carousel');
    var numPanels = $scope.items.length;
    var theta = 360 / numPanels; // rotation between each panel in 3D space
    var radius = Math.round(150 / Math.tan(Math.PI / numPanels)); // how far in Z-axis the panels are pushed out

    //rotate panels by theta
    for (var i = 0; i < $scope.items.length; i++) {
        var panel = carousel.children[i];
        var angle = theta * i;
        panel.style.transform = 'rotateY(' + angle + 'deg) translateZ(' + radius + 'px)';
    };
};

每次按下“初始化”按鈕時，都會使用選定的面板數調用$ scope.initializeCarousel函數。

我覺得這可能與CSS編碼有關，不一定與javascript有關，但我不確定。 我對CSS動畫完全陌生。

對此的任何指導都是很棒的。 非常感謝！

Answer 1

我的猜測是您需要弄清楚“球體”的半徑，並將所有面板沿z方向至少向前移動該距離。 更好的方法是移動相機，使相機遠離物體。