title: Transition only one kind of transform at a time in CSS
body: <p>I can't find a way to transition only one kind of transform in CSS. </p>
  
  <p>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.</p>
  
  <p>I then want to have, say an arm, do a transition on just <code>transform: rotate(20deg)</code> 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?</p>
  
  <p>In the example code below you can see that I make sure that the triangle is initially touching the other shape, using <code>transform: translate</code>. Then I do a <code>transform: rotate</code> on hover.  It works, but it ALSO does the <code>translate</code> again.</p>
  
  <p>(I suppose if the images could be placed in their right location without needing a <code>transform: translate</code>, 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 <code>transition</code> to only <code>transform: rotate</code>.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="wrapper"&gt;
    &lt;img id="Arm" src="https://i.stack.imgur.com/yCC87.png" /&gt;
    &lt;img id="Body" src="https://i.stack.imgur.com/mmzDM.png" /&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>