为什么CSS转换(通过Javascript)不适用于多个函数

Question

真的很简单的问题，我有一个相机，它使用变换来移动/缩放/旋转，我希望所有这些都在GPU上完成(所以，使用变换(。使用一个变换(translate()(，它可以很好地工作并且没有问题。然而，如果我加上另外2个，它会突然变成一个空字符串：

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

这将输出所需的字符串(translate3d(50px, 50px, 0px)(。然而，添加其他类似属性：

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

记录一个空字符串，甚至不记录translate3d()。为什么会发生这种情况？

Answer 1

正如您在评论中确认的那样：

由于this.ang未定义，因此生成的字符串中包含单词undefined，因此它是一个无效的CSS表达式。众所周知，CSS会忽略无效的表达式，因此整个字符串会被丢弃。