1

这是我的问题

小提琴

我有 4 个 div，position:absolute它们的位置是根据它们的 id 定义的。

当用户点击一个 div 时，该 div 会进行旋转和缩放的转换。我的目标是将生成的 div（黄色）定位在一个非常特殊的位置：在父节点的中心。

现在在我的Fiddle中，它确实会自行旋转，这不是我想要的。

我尝试了什么；

  • 添加到我的 transform transform:translate(x,y)，但这与单击之前的 div 相关，这意味着每个 div 都会将转换后的 div 发送到另一个位置。
  • 添加left:5%;top:5%;希望它会起作用，但事实并非如此。
  • 再次添加一个transform-origin，它是相对于 div 本身而不是父级或主体

我的问题：是否可以在过渡期间相对于父节点而不是自身来定义 div 的位置？

4

2 回答 2

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/

于 2012-12-20T09:57:53.010 回答
1

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

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

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

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

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

于 2012-12-20T09:55:10.157 回答