css3和jquery中的rotateY和width關係

Question

目前我正在開發3D圖庫庫。

工作超過2天之後，我在這裏達到

黑線表示預計視圖。更多更好的例子是低於

我只需要做3D全景。哪裏可以有n張圖片，我需要水平放置，因此只有3張圖片多出現在1列中。

我正在動態添加列。但問題是觀點。

這裏是我試過的代碼，

var maxAngle = 35, originalAngle = maxAngle, totalDivs = jQuery(".galleryWrapper").children(".container").length, increamentAngle = (maxAngle + maxAngle)/(totalDivs - 1), mainAngle = maxAngle; 
      maxAngle = maxAngle + increamentAngle; 

      for (var i = 1; i <= totalDivs; i++) { 
       previousAngle = maxAngle; 
       maxAngle = maxAngle - increamentAngle; 
       var width = null, marginTop = null; 
       if (!(1 == i || totalDivs == i)) { 
        var commonPercentage = mainAngle - Math.abs(maxAngle); 
        width = (130 - ((130 * commonPercentage)/100)) * 1.07; 
        marginTop = commonPercentage * 1.05; 

       } else { 
        width = 130; 
        marginTop = 0; 
       } 
       jQuery(".col" + i).css("margin-top", marginTop + "px"); 
       jQuery(".col" + i + " a").css("-o-transform", "rotateY(" + maxAngle + "deg)").css("-webkit-transform", "rotateY(" + maxAngle + "deg)").css("-moz-transform", "rotateY(" + maxAngle + "deg)").css("-ms-transform", "rotateY(" + maxAngle + "deg)").css("transform", "rotateY(" + maxAngle + "deg)"); 

       jQuery(".col" + i + " img").css("width", width + "px"); 
      } 

我已經試過的，計算百分比，mainAngle和當前角度。據此，我計算寬度。相似性保證金最高。

他們有更好的方法來解決這個問題嗎？

Answer 1

在3D變換去遠一點：

HTML

<div class="test"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box">4</div> 
<div class="box">5</div> 
<div class="box">6</div> 
<div class="box">7</div> 
<div class="box">8</div> 
<div class="box">9</div> 
<div class="box">10</div> 
<div class="box">11</div> 
<div class="box">12</div> 
<div class="box">13</div> 
<div class="box">14</div> 
<div class="box">15</div> 
<div class="box">16</div> 
<div class="box">17</div> 
<div class="box">18</div> 
<div class="box">19</div> 
<div class="box">20</div> 
<div class="box">21</div> 
</div> 

CSS

.test{ 
    position: absolute; 
    width: 800px; 
    height: 100px; 
    left: 20px; 
    top: 50px; 
    -webkit-perspective: 600px; 
    -webkit-perspective-origin-x: 50%; 
    -webkit-perspective-origin-y: 150px; 
} 


.box{ 
    display: block; 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    left: 50%; 
    background-color: lightblue; 
    -webkit-transform-origin: 0px 0px 500px; 
    font-size: 30px; 
    color: white; 
} 

.box:nth-child(3n+1) { 
    top: 0px; 
} 
.box:nth-child(3n+2) { 
    top: 110px; 
} 
.box:nth-child(3n+3) { 
    top: 220px; 
} 

.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { 
    -webkit-transform: rotateY(42deg); 
} 
.box:nth-child(4), .box:nth-child(5), .box:nth-child(6) { 
    -webkit-transform: rotateY(28deg); 
} 
.box:nth-child(7), .box:nth-child(8), .box:nth-child(9) { 
    -webkit-transform: rotateY(14deg); 
} 
.box:nth-child(13), .box:nth-child(14), .box:nth-child(15) { 
    -webkit-transform: rotateY(-14deg); 
} 
.box:nth-child(16), .box:nth-child(17), .box:nth-child(18) { 
    -webkit-transform: rotateY(-28deg); 
} 
.box:nth-child(19), .box:nth-child(20), .box:nth-child(21) { 
    -webkit-transform: rotateY(-42deg); 
} 

demo

更新與用於容器新的寬度值演示（按評論如下）

Answer 2

如果我理解你的問題是正確的，那麼你就試圖讓你的幻燈片看起來向後退入3D空間，這樣每個幻燈片都會遠離觀看者。 IMO一個不錯的選擇將是：

transform: perspective(...) 

你可以用它來使整個元素及其內容在3D空間中旋轉。將它應用於rotateY的父div，它會形成一個「牆」，隨着它變寬，看起來越來越遠。

樣本HTML：

<ul class="photos"> 
    <li>content</li> 
    ... 
    <li>content</li> 
</ul> 

和css：

.photos { 
    -webkit-transform: perspective(1000px) rotateY(45deg); 
    transform: perspective(1000px) rotateY(45deg); 
} 

一個更完整的例子見this JSFIDDLE。