这是我的问题
我有 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 相对于父节点而不是自身的位置?
最佳答案
您的 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/
关于javascript - 如何在进行旋转过渡时相对于父节点定位 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13968890/