Transition only one kind of transform at a time in CSS - css

Question

I can't find a way to transition only one kind of transform in CSS.
I have a bunch of images (arms, legs, head etc.), that upon loading need to have a "transform: translate" applied to them so that they are in the right place before I do anything else.
I then want to have, say an arm, do a transition on just transform: rotate(20deg) on hover. The problem is that when transitioning, it will repeat the initial translation along with that rotation, but I only want it to do the rotation on hover. How can I make it only transition that one rotation?
In the example code below you can see that I make sure that the triangle is initially touching the other shape, using transform: translate. Then I do a transform: rotate on hover. It works, but it ALSO does the translate again.
(I suppose if the images could be placed in their right location without needing a transform: translate, that could perhaps solve it, but I don't know how to do that either. And It would just be better if I could isolate the transition to only 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

As you're overwriting your non-hover transform value on hover with the rotate, your arm gets positioned to its original position (like when there wouldn't be any translate on it).
As you can set multiple values for the transform property, just also add the translate on hover to it. This will keep your arm on the right position and just rotates it.
/* 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>