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 元素 默认 是一个内联元素，它被赋予了 vertical-align: baseline property/value 对，它在视觉上产生并带有一个小的 whitespace 或 “margin-bottom” 在它下面(这可以就像你已经做的那样，在给它一个边框时很容易看到)，这当然是罪魁祸首并导致摆动效果。

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

另一种解决方法是简单地将其显示为 block level 元素，其中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=""> -->