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

这里是我的问题如何在执行旋转转换时相对于父节点定位div？

Fiddle

我有4个格，是在position:absolute和他们的位置被定义取决于它们的ID。

当用户点击div时，div在旋转和缩放时发生转变。我的目标是将得到的div（黄色）放置在一个非常特别的地方：位于父节点的中心。

现在在我的Fiddle，它自己旋转，这是不是我想要的。

我尝试了其他事情;

添加到我的改造transform:translate(x,y)，但这是相对的被点击之前的div，这意味着每一个DIV将转化DIV发送到另一个位置。
加left:5%;top:5%;希望它能工作，但它的确不是。
添加transform-origin，但再次，它是相对于DIV本身，而不是家长或身体

我的问题：是否有可能与对于定义的过渡期间div的位置父节点而不是自己？

来源

2012-12-20 leMoisela

使用翻译似乎工作：http://jsfiddle.net/8XKx3/ –

感谢您的帮助。当然，如果你硬编码的答案，这将工作。我宁愿寻找一个通用的答案（在这个例子中有4个div，但在我真正的webapp中，有几十个......）。 thx无论如何 – leMoisela

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

来源

2012-12-20 09:57:53

，你也可以说'transition：width 0.3s'谢谢，这正是我所期待的。特别是在转换中添加'left'和'top'非常聪明！ – leMoisela

@安迪这已经在我的答案。阅读第二个片段。 –

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

我在父母上添加了position:relative。所以现在当你的孩子，他们是基于父母的位置。

我放在黄色方格在中心做这个：

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

忘了包括链接：http://jsfiddle.net/hZfhQ/2/

来源

2012-12-20 09:55:10 wakooka

thx，这几乎是我正在寻找;唯一剩下的问题是它首先向中间转化，然后转向。无论如何thx：+1 – leMoisela

哦！和'-webkit-transition：全部为0.3s;'这非常酷！不知道'全部'的东西:) thx男人！ – leMoisela

不用担心，你可以定义你想要动画的属性，如果你想动画只有宽度 – wakooka

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

回答

相关问题