CSS3 вращать колебания - PullRequest
Новая
       12

CSS3 вращать колебания

0 голосов
/ 12 сентября 2018

У меня есть код ниже, и я пытаюсь повернуть изображение на 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

Есть идеи, как мне убрать это колебание?

1 Ответ

0 голосов
/ 12 сентября 2018

«Это изображение» правильно, но не совсем.Поскольку элемент img является встроенным элементом по по умолчанию , ему присваивается пара vertical-align: baseline свойство / значение , которая визуальнорезультаты и идут с небольшим пробелом или "margin-bottom" под ним (это можно легко увидеть, когда вы даете ему границу, как вы уже сделали), что, конечно,является виновником и вызывает этот эффект колебания.

Поэтому, чтобы избавиться от проблемы, просто измените значение по умолчанию из baseline, например, top, middle илиbottom, так как это "определенные значения" для использования.

Другим способом решения проблемы будет просто отобразить его как block элемент уровня ,где свойство 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=""> -->
...