javascript - 在通过转换属性使用缩放时定位同级

我在一个分区上实现CSS变换属性，并有一个用例，可按比例移动位于其旁边的兄弟姐妹。

我尝试调整位置，但没有起作用，并认为这是变换的功能。我可能是错的，所以想在这里再尝试一次。

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  transform: scale(5);
  transform-origin:top left;
  z-index:0;
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  z-index:1 /*Not sure why I had to do this too*/
}

<div class='parent'>
   <div class='childA'>Child A scales</div>
   <div class='childB'>I want to move when scaled</div>
</div>

请看一下这个游乐场，那里的儿童元素只是呆在那里，但我需要它向右移动
https://codepen.io/frank-underwood/pen/jOOmLJO?editors=1100

最佳答案

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  transform: scale(5);
  transform-origin:top left;
  z-index:0;
}

.childA:hover + .childB {
  transform: translateX(calc(22rem * 4));
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  z-index:1
}

<div class='parent'>
   <div class='childA'>Child A scales</div>
   <div class='childB'>I want to move when scaled</div>
</div>

我不确定您要移动多少，或在哪里移动。这是使它在缩放元素悬停时移动的代码。我正在使用相邻的CSS组合器来实现此目的。当您将鼠标悬停在ChildA上时，可以为相邻的ChildB提供一组属性。

至于为什么必须在.childB上放置z-index的原因是因为转换会创建新的堆叠上下文。即使.childA在HTML中的.childB之前，转换实际上也将.childA带到了一个新层。因此，您必须设置.childB的z-index。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

这里是有关堆栈上下文的一些读物。了解这些功能是如何工作的以及创建新功能的原因非常重要。

编辑您可以根据悬停的元素计算平移，平移将持续移动。我在宽度上添加了2rem，因为您在任一侧都有1rem的填充。 22rem * 4而不是5，因为scale（1）= 22rem。

关于javascript - 在通过转换属性使用缩放时定位同级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58546886/