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?

Maybe because this.ang is undefined? CSS ignores invalid values, I wouldn't be surprised if an expression containing undefined was discarded altogether — Jeremy Thille
– Jeremy Thille, Commented Nov 27, 2020 at 14:35

Jeremy Thille · Accepted Answer · 2020-11-27 15:01:07Z

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.

answered Nov 27, 2020 at 15:01

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related