jQuery的CSS3，第二「旋轉（）」在「變換：旋轉（）平移（）旋轉（）」，代替第一一個

Question

我有這部分代碼即對準一圈的div：

angle = 0; mangle = 0;   
for(i = 1; i<= count; i++) 
{ 
    $("#p" +i).css("transform", "rotate(" + angle + "deg) translate(250px) rotate("+mangle+"deg)"); 
    angle = 360/count; 
    mangle = (-1) * angle; 
} 

但問題是第二個rotate（）最後替換了第一個！ 例如，它應該是：

rotate(30deg) translate(250px) rotate(-30deg) 

但它給：

rotate(-30deg) translate(250px) 

我甚至嘗試http://ricostacruz.com/jquery.transit，但它並沒有幫助。所以有什麼問題？

Answer 1

雖然我沒有找到任何解決方案，但我做了一個小把戲！ 我有div元素與ids'＃p1'，'＃p2'，... 所以我創建了另一個div在每個內部然後應用第二個'旋轉（）'到這個新的div和它的工作:)

它是：

<div id='p1'> content </div> 
<div id='p2'> content </div> 
<div id='p3'> content </div> 

的jQuery：

angle = 0; mangle = 0;   
for(i = 1; i<= count; i++) 
{ 
    $("#p" +i).css("transform", "rotate(" + angle + "deg) translate(250px) rotate("+mangle+"deg)"); 
    angle = 360/count; 
    mangle = (-1) * angle; 
} 

現在是：

<div id='p1'><div> content </div></div> 
<div id='p2'><div> content </div></div> 
<div id='p3'><div> content </div></div> 

jQuery：

angle = 0; mangle = 0;   
for(i = 1; i<= count; i++) 
{ 
    $("#p" +i).css("transform", "rotate(" + angle + "deg) translate(250px)"); 
    $("#p" +i).children('div').css("transform", "rotate(" + mangle + "deg)"); 
    angle = 360/count; 
    mangle = (-1) * angle; 
} 

Answer 2

您可以嘗試將第二個「旋轉」放在第二個「變換」中。這是我的第一個想法。