悬停的四方形Div旋转中心 - 旋转器板

Question

我会欣赏另一双眼睛，因为我在晚上被卡住或烧坏了。

我想要做的就是在包含div的内部有一个四方形div布局。那部分没什么大不了的。当我尝试添加另一个div直接定位在这四个方格div的中心并且translate rotate中心div指向悬停的方格时，我的问题就出现了。

有关视觉说明，请参阅我的目标。有点像旋转游戏板。

我在这里遇到了CODEPEN

您从概念示例中看到的问题是;

1. 四个div与其容器的高度/宽度不匹配。因此标记不会出现在四个正方形的中心。
2. 前两个div完全符合预期，并适当地旋转标记.... 但是底部两个不。

非常感谢任何见解，我只是偏爱纯粹的HTML / CSS。谢谢！

＆＃13;
＆＃13;
#pw-spots {
  margin: 0;
  border: green 10px solid;
}

#TL1, #TR2, #LB3, #LB4 {
  width:10em;
  height:8em;
  margin:0; 
  border:1px solid black; 
  float: left;
  display:block;
}

#TL1 {
  background-color:purple;
}

#TR2 {
  background-color:blue;  
}

#LB3 {
  background-color:wheat;
}

#LB4 {
  background-color:salmon;
}

#TL1:hover ~ #spinner {
  transform: rotate(-33deg);
}
#TR2:hover ~ #spinner {
  transform: rotate(33deg);
}
#LB3:hover #spinner {
  transform: rotate(99deg);
}
#LB4:hover #spinner {
  transform: rotate(-99deg);
}

#spinner {
  height:50px;
  width:10px;
  border-top:red 10px solid;
  background-color:orange;
  margin-left: auto;
  margin-right: auto;
  margin-top:-30px;
  margin-bottom:-30px;
}
＆＃13;
<div id="pw-spots">
  <figure id="TL1">1</figure>
  <figure id="TR2">2</figure>
  <div style='clear:both'></div>
  <div id="spinner" class=""></div>
  <figure id="LB3">3</figure>
  <figure id="LB4">4</figure>
  <div style='clear:both'></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

您的问题的答案：

  

四个div与其容器的高度/宽度不匹配。因此标记不会出现在四个正方形的中心。

这是因为容器是一个块容器，因此将占用完整的可用宽度，而4 div元素将被浮动并分配给它们的特定width。您应该将容器设为display: inline-block或设置为width: calc(20em + 4px)（20em用于2个方格，4px用于2px边框。 2个方格）。

  

前两个div完全符合预期，并适当地旋转标记....但是底部两个没有。

选择器错误。此选择器 - #LB3:hover #spinner将匹配一个微调器元素，该元素是id为LB3的元素的 子 。但是旋转器不是它的孩子，而是它的兄弟姐妹。即使它是兄弟，我们也不能使用~（一般兄弟组合子），因为它只适用于DOM中参考元素（在本例中为#LB3）之下的兄弟，而不是那些在它之上的兄弟姐妹。这里的微调器在DOM中位于#LB3之上，因此您必须修改结构以将其移动到底部（容器下的最后一个元素）。

<强>解决方案：

以下是固定版本。我已经进行了上面提到的更改，修改了微调器的旋转角度，相对于容器绝对定位，然后使用translate变换来定位它。

#pw-spots {
  position: relative;
  margin: 0;
  width: calc(20em + 4px);
  border: green 10px solid;
}
#TL1, #TR2, #LB3, #LB4 {
  width: 10em;
  height: 8em;
  margin: 0;
  border: 1px solid black;
  float: left;
  display: block;
}
#TL1 {
  background-color: purple;
}
#TR2 {
  background-color: blue;
}
#LB3 {
  background-color: wheat;
}
#LB4 {
  background-color: salmon;
}
#TL1:hover ~ #spinner {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
#TR2:hover ~ #spinner {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
#LB3:hover ~ #spinner {
  transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
#LB4:hover ~ #spinner {
  transform: translateX(-50%) translateY(-50%) rotate(135deg);
}
#spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 50px;
  width: 10px;
  border-top: red 10px solid;
  background-color: orange;
  transform: translateX(-50%) translateY(-50%);
  transition: all 2s ease; /* just for fun */
}

<div id="pw-spots">
  <figure id="TL1">1</figure>
  <figure id="TR2">2</figure>
  <div style='clear:both'></div>
  <figure id="LB3">3</figure>
  <figure id="LB4">4</figure>
  <div style='clear:both'></div>
  <div id="spinner" class=""></div>
</div>