html - div在旋转时掉出位置

Question

我制作了一个模拟时钟，div与其他 2 个共享 1 个父空间divs：

.left {
  vertical-align: top;
  width: 27%;
  overflow: hidden;
  display: inline-block;
}

#picLeft {
  height: 100%;
  width: 100%;
}

.container {
  vertical-align: top;
  position: relative;
  display: inline-block;
  width: 16.7%;
}

.clock {
  vertical-align: top;
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
}

.hands {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hands-cl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.right {
  vertical-align: top;
  width: 52.2%;
  height: 100%;
  overflow: hidden;
  display: inline-block;
}

.picRight {
  width: 100%;
  height: 100%;
}

<div class="header-logo">
  <div class="left">
    <img id="picLeft" src="TIDleft.png">
  </div>
  <div class="container">
    <div class="clock">
      <img class="hands" src="TidClockFace.png">
      <img id="hourHand" class="hands-cl" src="hourHand.png">
      <img id="minuteHand" class="hands-cl" src="hourHand.png">
    </div>
  </div>
  <div class="right">
    <img class="picRight" src="TIDright.png">
  </div>
</div>

这就是发生的事情：

如您所见，这看起来很荒谬。我不知道问题出在旋转还是图像大小上，因为divs缩小图像以适合网站的一部分。这是我坚持寻找答案的第三天。没有 stackoverflow 线程是相似的，我已经用完了搜索词的想法。我希望这个问题被正确地提出，并且已经提供了足够的信息。如果不是，请不要犹豫，要求或纠正我。

标签： htmlcss