如何在旋转图像时编辑图像尺寸？

Question

我有一张齿轮图片使用CSS的关键帧旋转效果在旋转，但是我想将该图片的宽度缩小到比高度更小，就像下面这张图片中的齿轮图片一样。

旋转齿轮演示

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

- Rowell

Answer 1

你可以在不同关键帧步骤中使用ScaleX 变换值。它会在最后一步调整大小，以显示其大小差异。

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

- m4n0

---

现在我明白了，谢谢你的详细解答 :) - Rowell

Answer 2

@m4n0的答案很好。另一种计时旋转的方法是将.gear包裹在另一个元素中，并对包含元素进行变换：

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

.gear__wrapper {
  transform: scaleX(0.5);
}

- simmer

Answer 3

这可能很方便，但如果您期望其他内容，您可能需要计时旋转等操作。

我只添加了简单的，请使用其他前缀。

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

- Ashutosh Kumar