Why is CSS transform (via Javascript) not working with more than one function

Question

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 ( translate() ), it works fine and has no issues. However, if I add in the other 2, it suddenly becomes an empty string:

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)
        }
    }
)

This outputs the expected string ( translate3d(50px, 50px, 0px) ). However, adding in the other properties like so:

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)
        }
    }
)

Logs an empty string, not even the translate3d() . Why is this happening?

Answer 1

As you confirmed in the comments:

Since this.ang is undefined, the generated string contains the word undefined in it, so it is an invalid CSS expression. CSS is known to ignore invalid expression, so the whole string is simply discarded.