How to edit the size of image while rotating?

Question

I have a gear image rotating using keyframe spin of CSS. but I want to resize the width of the image less than the height like in the image (see gear image below).

Gear image

Demo gear rotating

.gear {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<img class="gear" src="https://i.imgur.com/v1eydp4.png">

score 4 · Answer 1 · answered Jun 30 '20 at 18:33

You can make use of the ScaleX transform value at various keyframe steps. It resizes at the last step to show you the difference in the size of it.

.gear {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: scaleX(0.5) rotate(360deg);
  }
  50% {
    transform: scaleX(0.5) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<img class="gear" src="https://i.imgur.com/v1eydp4.png">

now I get it, thank you for your informative answer :) – Rowell Jun 30 '20 at 20:24 — Rowell, Jun 30 '20 at 20:24

score 2 · Accepted Answer · answered Jun 30 '20 at 18:34

@m4n0's answer works well. An alternate approach to timing rotations is to simply wrap .gear with another element, and transform the containing element:

<div class="gear__wrapper">
  <img class="gear" />
</div>

.gear__wrapper {
  transform: scaleX(0.5);
}

score 1 · Answer 3 · answered Jun 30 '20 at 18:32

It might be handy but if you are expecting something else, you might need to time the rotations and all.

I have only added the simple, please other prefixes.

.gear {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin linear 4s infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }

}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg) scaleX(1);
  }
  50%{ transform: rotate(180deg) scaleX(0.5);
}

<img class="gear" src="https://i.imgur.com/v1eydp4.png">

How to edit the size of image while rotating?

3 Answers3