在 CSS 中一次仅转换一种转换

Question

我无法在 CSS 中找到仅转换一种转换的方法。

我有一堆图像（手臂、腿、头等），在加载时需要对它们应用 "transform: translate"，以便在我执行任何其他操作之前它们位于正确的位置。

然后我想在悬停时只 transform: rotate(20deg) 做一个过渡，比如一只手臂。问题是在转换时，它会随着旋转重复初始平移，但我只希望它在悬停时进行旋转。我怎样才能让它只转换那一个旋转？

在下面的示例代码中，您可以看到我使用 transform: translate 确保三角形最初接触到另一个形状。然后我在悬停时执行 transform: rotate。它有效，但它也会再次执行 translate。

（我想如果可以将图像放置在正确的位置而不需要 transform: translate，那也许可以解决它，但我也不知道该怎么做。它只是如果我可以将 transition 隔离为仅 transform: rotate 会更好。）

/* INITIAL PLACING OF THE IMAGES IN THEIR RIGHT PLACES */
img#Arm {
  position: relative;
  transform: translate(220px, 100px);
}

img#Body {
  position: relative;
  transform: translate(150px, 180px);
}
/* END OF PLACING OF THE IMAGES IN THEIR RIGHT PLACES */

/* THESE ARE THE TRANSFORMATIONS ON HOVER */
img#Arm {
  transform-origin: 200px 200px;
  transition: 1s ease-in-out;
}

section:hover img#Arm {
  transform: rotate(25deg);
}
/* END OF TRANSFORMATIONS ON HOVER */

/* THIS IS TO KEEP THE LOGO PARTS GROUPED TOGETHER DESPITE WINDOW CHANGING RESOLUTIONS */
section.wrapper {
  margin: 0 auto;
  /* this keeps the logo centered on the page */
  min-width: 800px;
  /* Minimum width of your wrapper element */
  max-width: 800px;
  min-height: 800px;
  max-height: 800px;
}

<section class="wrapper">
  <img id="Arm" src="https://i.stack.imgur.com/yCC87.png" />
  <img id="Body" src="https://i.stack.imgur.com/mmzDM.png" />
</section>

Answer 1

当您通过旋转覆盖悬停时的非悬停变换值时，您的手臂会定位到其原始位置（就像上面没有任何平移时一样）。

因为您可以为变换设置多个值属性，只需将悬停时的翻译添加到它。这将使您的手臂保持在正确的位置并旋转它。

/* INITIAL PLACING OF THE IMAGES IN THEIR RIGHT PLACES */
img#Arm {
  position: relative;
  transform: translate(220px, 100px);
}

img#Body {
  position: relative;
  transform: translate(150px, 180px);
}
/* END OF PLACING OF THE IMAGES IN THEIR RIGHT PLACES */

/* THESE ARE THE TRANSFORMATIONS ON HOVER */
img#Arm {
  transform-origin: 200px 200px;
  transition: 1s ease-in-out;
}

section:hover img#Arm {
  transform: translate(220px, 100px) rotate(25deg);
}
/* END OF TRANSFORMATIONS ON HOVER */

/* THIS IS TO KEEP THE LOGO PARTS GROUPED TOGETHER DESPITE WINDOW CHANGING RESOLUTIONS */
section.wrapper {
  margin: 0 auto;
  /* this keeps the logo centered on the page */
  min-width: 800px;
  /* Minimum width of your wrapper element */
  max-width: 800px;
  min-height: 800px;
  max-height: 800px;
}

<section class="wrapper">
  <img id="Arm" src="https://i.stack.imgur.com/yCC87.png" />
  <img id="Body" src="https://i.stack.imgur.com/mmzDM.png" />
</section>

在 CSS 中一次仅转换一种转换

Transition only one kind of transform at a time in CSS

css

css-transitions

css-transforms