title: CSS3 transform rotate without overriding transform translate
body: <p>Let's say I have an element that already has a translate applied to it:</p>
  
  <pre><code>&lt;div class="elem"&gt;&lt;/div&gt;
  
  .elem { transform: translate(50%,0); }
  </code></pre>
  
  <p>And now I want to rotate the same element using an additional class. So now the HTML and CSS looks like this:</p>
  
  <pre><code>&lt;div class="elem rotate"&gt;&lt;/div&gt;
  
  .elem { transform: translate(50%,0); }
  .rotate { transform: rotateZ(20deg); }
  </code></pre>
  
  <p>The problem occurs when the rotation is not added to the existing translate, but rather overrides and negates it.</p>
  
  <p>How do I preserve the original translate without having to bloat up my code like I did below:</p>
  
  <pre><code>.elem { transform: translate(50%,0); }
  .rotate { transform: translate(50%,0) rotateZ(20deg); }
  </code></pre>
  
  <p>Here's a fiddle:
  <a href="https://jsfiddle.net/timothyzhu/vm84vsj7/" rel="nofollow">https://jsfiddle.net/timothyzhu/vm84vsj7/</a></p>
  
  <p>Thanks guys.</p>