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方向至少向前移动该距离。 更好的方法是移动相机，使相机远离物体。