Can you combine multiple transform functions together? How? What is the use of the transform-origin property?

You can use combinations of translate(), scale(), rotate(), skew(), and even 3D transformations to create dynamic effects and animations.

The transform-origin property defines the point around which a transformation (like rotation, scaling, or skewing) occurs. By default, the origin is the center (50% 50%) of the element, but you can change it to any corner, edge, or custom position.

Here, the element rotates 45 degrees around its top-left corner instead of its center. This is useful for effects like flipping doors, rotating pointers, or custom animations.

In this example, the .wheel element spins around its center smoothly when hovered. Changing the transform-origin to top left or another point would make it spin around that specific edge or corner.