Question

我正在使用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。！

Answer 1

我的猜测是你需要弄清楚＆＃34;球体的半径＆＃34;并将所有面板沿z方向移动至少该距离向前。更好的方法是将您所在的相机移动远离物体。

CSS Dynamic 3D carousel，z轴定位

1 个答案: