Understanding Transformation Matrices in Computer Graphics

Tanslate, rotate and scale are common operations in computer graphics , which are used to transfor objects.
All transformations mentioned above are based on matrix multiplication, where each transformation is represented by a matrix. As we know, matrix multiplication is not commutative, so the orders of transformations matters.
In many graphics application, an object's center is located at its coordinate origin. Rotation and scaling can change an object's coordinate system, while translation only changes the object's origin.
Let's consider the following css3 example:

.box {
width: 100px;
height: 100px;
background-color: #000;
transform:  rotateY(45deg) translateX(50px);
}

rotateY(45deg) : The coordnate system of box also applied this transformation, rotating 45 degrees clockwise, so its x-axis points at clockwise 45deg angle. Then, when applying translate(50px), the box will translate 50px along rotated x-axis instead of original horizontal axis.
Now consider another case:

.box {
width: 100px;
height: 100px;
background-color: #000;
transform:  scaleX(2) translateX(50px);
}

Would you think that box translate 50px or 100px on x-axis? the answer is 100px, because scale(2) doubles the size of x-axes, so translateX(50px) is actually equivalent to translate(100px).

By the way, the order of transformation in three.js is not affected by the order in which you set the properties because Three.js recalculates the object's transformation matrix lazily(only when needed, such as during rendering). In Three.js, the transformation matrix for an object is computed as follows:
Matrix=Translation×Rotation×Scale
This means that the object is scaled first, then rotated, and finally translated, regardless of the order in which you set the properties. However, if you use methods like translate(X/Y/Z) and rotate(X/Y/Z), the transformation for an object is applied immediately, so the order in which you set the properties matters in this case.