如何在进行旋转转换时相对于父节点定位 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 本身 而不是父母或正文

我的问题：是否可以在过渡期间定义 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/

Answer 2

我去掉了你不想要的翻转效果。

我在父级上添加了position:relative。所以现在当你 position: absolute 孩子时，他们是根据父母定位的。

我通过这样做将黄色方块放在中心：

top:50% !important;
left:50% !important;
margin-top: -75px;
margin-left: -75px;

忘记包含链接：http://jsfiddle.net/hZfhQ/2/