title: Set CSS transform in multiple places
body: <p>Is there any way to set style <code>transform: translateX(100px) translateY(200px) rotate(100deg) scale(1.5)</code> on multiple places? For example, there are these lines in CSS:</p>
  
  <pre><code>.translate-x {
      transform: translateX(100px);
  }
  
  .translate-y {
      transform: translateY(200px);
  }
  
  .rotate {
      transform: rotate(100deg)
  }
  
  .big {
      transform: scale(1.5);
  }
  </code></pre>
  
  <p>And then, I would like use these classes in HTML to combine <code>transform</code>.</p>
  
  <pre><code>&lt;div class="translate-x rotate big"&gt;&lt;/div&gt;
  &lt;div class="translate-y big"&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>The problem is that the styles do not combine, but the last one will overwrite the others.</p>
  
  <p>Only way what I know is combine all classes. But there are many combinations...</p>
  
  <pre><code>.translate-x.translate-y {
      transform: translateX(100px) translateY(200px);
  }
  
  .translate-x.translate.y.big {
      transform: translateX(100px) translateY(200px) scale(1.5);
  }
  
  ...
  </code></pre>