CSS3 旋转摆动

Question

我有下面的代码，我正在尝试将图像旋转 360 度。但旋转会摇晃。

.pully {
  position: absolute;
  right: 3.7em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

@-webkit-keyframes clockwiseSpinner {
  from {-webkit-transform: rotate(0deg)}
  to {-webkit-transform: rotate(360deg)}
}

<div class="line"></div>
<img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt="">

JSFiddle

知道如何消除这种不稳定吗？

Answer 1

“这就是形象”是正确的，但不完全正确。由于默认情况下该img 元素是内联元素，因此它被赋予了属性/值对，这在视觉上产生了效果，并在其下方带有一点空白或“margin-bottom”（当给它一个边框时，可以很容易地看到这一点，因为您'已经完成了），这当然是罪魁祸首并导致了摆动效果。vertical-align: baseline

因此，为了解决这个问题，只需将 的默认值更改为baseline例如top、middle或bottom，因为这些是要使用的“某些值” 。

解决这个问题的另一种方法就是将其显示为block level element，其中该vertical-align 属性没有位置。

注意：如果您将这些更改应用于第一个示例或原始帖子，问题仍然存在，因此这确实是“图像的错误”。

.pully, .pully_left {
  border: 1px solid red;
  position: absolute;
  right: 3.8em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: 4;
  animation-duration: 1s;
  /* shorthand: "animation: clockwiseSpinner 1s ease-in 4;" */
}

.pully_left {right: 10.25em}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

.pully > img {vertical-align: bottom} /* or "top" / "middle" or "display: block" */

@-webkit-keyframes clockwiseSpinner {
  /*from {-webkit-transform: rotate(0deg)} unnecessary */
  to {-webkit-transform: rotate(360deg)}
}

<div class="line"></div>

<div class="pully">
  <img src="https://s8.postimg.cc/u6gyll9ud/p-pully-center.png" alt="">
</div>

<div class="pully_left"> <!-- for comparison -->
  <img src="https://s8.postimg.cc/u6gyll9ud/p-pully-center.png" alt="">
</div>

<!-- <img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt=""> -->