How to edit the size of image while rotating?

user_13836411 0
Viewed 146

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

image-rotation keyframe css-animations css
3 Answers

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

user_48139130

@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);
}
user_1290860

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

user_115635610
Related