CSS 动态 3D 轮播，z 轴定位答案

【问题标题】：CSS Dynamic 3D carousel, z-axis positioningCSS 动态 3D 轮播，z 轴定位
【发布时间】：2014-09-29 10:04:34
【问题描述】：

我正在使用 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;
}

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

每次按下“初始化”按钮时，都会调用 $scope.initializeCarousel 函数，使用选定的面板数。

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

对此的任何指导都会很棒。谢谢S.O.！

【问题讨论】：

看起来浏览器（由于 CSS 转换）正在自动调整您的正方形大小以显示近/远。您需要使用一些三角函数来计算它根据您使用的不同半径将您的前正方形缩放到什么，并相应地减小正方形/高度。对不起，我现在没有时间做实际的计算，如果你没有得到任何答案，我稍后会尝试做。

标签： javascript css angularjs carousel css-animations

【解决方案1】：

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

【讨论】：