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

您可以尝试将第二个＆＃34;旋转＆＃34;在第二个＆＃34;转换＆＃34;。这是我的第一个想法。

Answer 2

虽然我没有找到任何解决方案，但我做了一招！我有div元素与ids＆＃39;＃p1＆＃39; ，＆＃39;＃p2＆＃39;，... 所以我在每个内部创建了另一个div然后应用了第二个＆＃39; rotate（）＆＃39;到这个新的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;
}

jQuery CSS3，第二个＆＃39; rotate（）＆＃39; in＆＃39; transform：rotate（）translate（）rotate（）＆＃39; ，取代第一个

2 个答案: