Question

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

我有一堆图像（手臂，腿，头等），在加载时需要进行变换：翻译＆＃34;适用于他们，以便在我做任何其他事情之前他们在正确的地方。

然后，我想让一只手臂在悬停时只在transform: rotate(20deg)上进行转换。问题是，当转换时，它将重复初始平移以及旋转，但我只希望它在悬停时进行旋转。我怎样才能使它只转换一次旋转？

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

（我想如果图像可以放在正确的位置而不需要transform: translate，这也许可以解决它，但我也不知道如何做到这一点。它只会是如果我可以将transition与transform: rotate隔离，那就更好了。）

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 1

当您使用旋转悬停时覆盖非悬停变换值时，您的手臂会定位到其原始位置（就像没有任何翻译一样）。

由于您可以为transform属性设置多个值，因此也可以在悬停时添加translate。这将使您的手臂保持在正确的位置并旋转它。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

在CSS

1 个答案: