在 CSS 中一次只转换一种变换

Question

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

我有一堆图像（手臂、腿、头等），在加载时需要对它们应用“变换：翻译”，以便在我做任何其他事情之前它们位于正确的位置。

然后我想在悬停时仅在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>