What is CSS transform?

CSS transform modifies an element's visual rendering — position, rotation, size, and skew — without affecting document layout. The element's original space is preserved, making transforms ideal for animations.

What is transform-origin?

transform-origin sets the point around which transformations are applied. The default is the element's center. Changing it to a corner or edge creates different rotation and scaling behaviors.

Are CSS transforms GPU-accelerated?

Yes. Transform and opacity are the only two properties that are always composited on the GPU. This makes them dramatically faster to animate than layout properties like width, height, or margin.

CSS Transforms: Rotate, Scale & Skew

🔄

Try CSS Transform Playground

Free, no signup →