javascript - 如何在进行旋转过渡时相对于父节点定位 div？

Question

这是我的问题

Fiddle

我有 4 个 div，它们位于 position:absolute 中，它们的位置是根据它们的 id 定义的。

当用户点击一个 div 时，该 div 会进行旋转和缩放转换。我的目标是将生成的 div(黄色)定位在一个非常特殊的位置:在父节点的中心。

现在在我的 Fiddle ，它确实会自行旋转，这不是我想要的。

除其他外，我尝试了什么；

• 添加到我的转换 transform:translate(x,y)，但这是相对的在点击之前发送到 div，这意味着每个 div 都会发送将 div 转换到另一个位置。
• 添加 left:5%;top:5%; 希望它能起作用，但确实如此不是。
• 添加一个 transform-origin 但同样，它是相对于 div 本身而不是 parent 或 body

我的问题:是否可以在转换期间定义 div 相对于父节点而不是自身的位置？

Answer 1

您的 top 和 left 覆盖不起作用的原因是因为 ID 选择器比类选择器更具体，因此具有优先权。您可以使用 !important 解决此问题:

.isTurning{
    background-color:yellow;
    z-index:1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
    -webkit-transform: scale(2) rotateY(180deg);
    left:27% !important;
    top: 25% !important;
}

或使用特异性:

#b_1.isTurning, #b_2.isTurning, #b_3.isTurning, #b_4.isTurning{
    background-color:yellow;
    z-index:1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
    -webkit-transform: scale(2) rotateY(180deg);
    left:27%;
    top: 25%;
}​

这是一个演示:http://jsfiddle.net/Fs6Zw/