Multiple transformations

Objects before transformation

Object 1

Note: the anchor point for all transformations is at the top left

transform: scale(2, 1);

1. The object is scaled horizontally.

transform: rotate(20deg);

1. The object is rotated clockwise.

transform: rotate(20deg) scale(2, 1);

1. The object is scaled horizontally (see Step 1).
2. The scaled object is rotated clockwise.

Notice the order!

transform: scale(2, 1) rotate(20deg);

1. The object is rotated clockwise (see Step 1).
2. The rotated object is scaled horizontally.

Notice the order!