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軸定位

回答

相關問題