CSS动态3D旋转木马，z轴定位

我正在使用CSS和JavaScript创建3D旋转木马。对于测试和开发，我已经上传了本页目前为止的内容：http://dev.rushfivedesigns.com/CSS动态3D旋转木马，z轴定位

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

我想解决的问题是：当我增加面板的数量时，与原点的距离增加，因此面板增加了可感知的大小（它们被炸毁）。如果前面板总是保持相同的尺寸，不管有多少面板，我都会喜欢它。因此，我不想将每个面板都按x距离推出，我希望前面板保持在3D空间中的静态位置，然后将其他所有东西都推到后面（希望是有道理的）。

我已经使用角度做了这个，但是这可以很容易地使用普通的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.！

来源

2014-09-03 Isaiah Lee

看起来像浏览器（由于CSS转换）自动调整您的广场出现近/远。您需要使用一些三角函数根据您正在使用的不同半径来计算您的前方广场的缩放比例，然后相应地减少具有/高度的广场。对不起，我现在没有时间做实际的计算，如果你没有得到任何答案，我会尽量在以后做。 – Jason 2014-09-04 00:12:50

我的猜测是你需要弄清楚“球体”的半径，并将所有面板沿z方向移动至少该距离前进。更好的方法是将相机放在远离物体的位置。

来源

2014-09-29 02:04:34 user3754705

CSS动态3D旋转木马，z轴定位

回答

相关问题