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

我删除了你不想要的翻转效果。

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

我将黄色方块放在中间位置：

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

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

Answer 2

您的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/

如何在进行旋转转换时相对于父节点定位div？

2 个答案: