在进行旋转过渡时，如何将DIV相对放置在母节上

Question

这是我的问题

小提琴

我有4个Div，在position:absolute中，其位置根据其ID定义。

当用户单击DIV上时，DIV会进行旋转和缩放的过渡。我的目标是将结果div（黄色）定位在一个非常特殊的位置：在父节点的中心。

现在在我的小提琴中，它确实在自身上旋转，这不是我想要的。

我尝试的是

• 添加到我的转换transform:translate(x,y)，但这是相对的在单击之前到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/