CSS动态三维旋转木马，z轴定位

CSS Dynamic 3D carousel, z-axis positioning

本文关键字：定位 旋转木马 动态 三维 CSS      更新时间：2023-09-26

我正在使用CSS和javascript创建一个3D旋转木马。为了测试和开发，我已经在这个页面上上传了迄今为止我所拥有的：http://dev.rushfivedesigns.com/

当你进入页面时，请点击"初始化"按钮将其转换为3D空间。默认情况下，它将使用5个面板进行初始化，并且可以使用控件进行更改。

我想解决的问题是：当我增加面板的数量时，与原点的距离会增加，因此面板的可感知尺寸会增加（它们会被炸开）。我希望无论有多少面板，前面板都能保持相同的尺寸。

因此，我不希望将每个面板向外推x距离，而是希望前面板保持在3D空间中的静态位置，然后将其他所有东西都推到它后面（希望这有意义）。

我已经使用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;
}

Javascript

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

每次按下"initialize"按钮时，都会调用$scope.initializeCarousel函数，使用所选面板的数量。

我有一种感觉，这可能只是与CSS编码有关，不一定与javascript有关，但我真的不确定。我对CSS动画完全陌生。

任何关于这方面的指导都将是伟大的。谢谢S.O。！

我的猜测是，你需要计算出"球体"的半径，并将所有面板沿z方向向前移动至少该距离。更好的方法是将相机移动到远离对象的位置。

相关文章：