div旋转时位置下降

Question

我做了一个类似的模拟时钟，以便与另外两个div共享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线程是相似的，并且我已经没有足够的搜索条件了。 我希望这个问题能被正确询问，并且已经给出了足够的信息。 如果不是，请随时提出要求或纠正我。