如何在旋转时编辑图像的大小？答案

【问题标题】：How to edit the size of image while rotating?如何在旋转时编辑图像的大小？
【发布时间】：2020-10-21 03:08:06
【问题描述】：

我有一个使用 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);
  }
}

&lt;img class="gear" src="https://i.imgur.com/v1eydp4.png"&gt;

【问题讨论】：

标签： css css-animations image-rotation keyframe

【解决方案1】：

@m4n0 的回答效果很好。计时旋转的另一种方法是简单地将.gear 与另一个元素包装在一起，并转换包含元素：

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

.gear__wrapper {
  transform: scaleX(0.5);
}

【讨论】：

【解决方案2】：

您可以在各个关键帧步骤中使用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);
  }
}

&lt;img class="gear" src="https://i.imgur.com/v1eydp4.png"&gt;

【讨论】：

现在我明白了，感谢您提供的信息丰富的回答 :)

【解决方案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);
}

&lt;img class="gear" src="https://i.imgur.com/v1eydp4.png"&gt;

【讨论】：