CODEWITHSUNDEEP
csscss-animations
null
null

Reputation: 1162

CSS3 rotate wobbles

I have below code and I am trying to rotate an image 360deg. But the rotation wobbles.

.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

Any idea how can I remove that wobbleness?

Upvotes: 0

Views: 1302

Answers (1)

VXp
VXp

Reputation: 12058

"It's the image" is right, but not entirely. Since the img element is an inline element by default, it's given the vertical-align: baseline property / value pair, which visually results and comes with a little whitespace or "margin-bottom" underneath it (this can be easily seen when giving it a border, as you've already done), which of course is the culprit and causes that wobble effect.

So in order to get rid of the issue, just change the default value of baseline to e.g. top, middle or bottom, as these are the "certain values" to use.

Another way of solving it would simply be displaying it as block level element, where the vertical-align property has no place.

Note: If you apply these changes to your first example or original post, the issue still persists, therefore it really is the "image's fault".

.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=""> -->

Upvotes: 5

Related Questions