css - 如何在旋转时编辑图像的大小？

Question

我有一个使用 CSS 关键帧旋转的齿轮图像。但我想将图像的宽度调整为小于图像中的高度(参见下面的齿轮图像)。

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

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