title: Why is CSS transform (via Javascript) not working with more than one function
body: <p>Really simple problem, I have a camera which uses transforms to move/zoom/rotate, and I would like it all to be done on the GPU (so, using transform). With one transform (<code>translate()</code>), it works fine and has no issues. However, if I add in the other 2, it suddenly becomes an empty string:</p>
  <pre class="lang-js prettyprint-override"><code>namespace `game.modules`(
      class Camera{
          constructor(tag){
              this.tag = tag;
              this.x = 0;
              this.y = 0;
              this.rotation = 0;
              this.scaleX = 1;
              this.scaleY = 1;
              this.animations = []
          }
  
          lookAt(object){
              this.x=object.x;
              this.y=object.y;
          }
  
          
          onDraw(){
              this.setTagFromData();
          }
  
          setTagFromData(){
              var x = -(this.x-100);
              var y = -(this.y-60);
              this.tag.style.transform = `translate3d(${x}px, ${y}px, 0px)`
              console.log(this.tag.style.transform)
          }
      }
  )
  </code></pre>
  <p>This outputs the expected string (<code>translate3d(50px, 50px, 0px)</code>). However, adding in the other properties like so:</p>
  <pre class="lang-js prettyprint-override"><code>namespace `game.modules`(
      class Camera{
          constructor(tag){
              this.tag = tag;
              this.x = 0;
              this.y = 0;
              this.rotation = 0;
              this.scaleX = 1;
              this.scaleY = 1;
              this.animations = []
          }
  
          lookAt(object){
              this.x=object.x;
              this.y=object.y;
          }
  
          
          onDraw(){
              this.setTagFromData();
          }
  
          setTagFromData(){
              var x = -(this.x-100);
              var y = -(this.y-60);
              this.tag.style.transform = `translate3d(${x}px, ${y}px, 0px) rotate(${this.ang}deg) scale(${this.scaleX}, ${this.scaleY})`
              console.log(this.tag.style.transform)
          }
      }
  )
  </code></pre>
  <p>Logs an empty string, not even the <code>translate3d()</code>. Why is this happening?</p>