CSS Click Chart

Transform Origin

Allows you to define horizontal and vertical offsets to change the origin, or anchor point, of a CSS transform (rotate, scale, etc).

Specification

Transform Origin on W3C

Example Code

.element {
  transform: rotate(-10deg);
  transform-origin: -20px -50px;
}

Live Demonstration

This box is rotated using CSS3 transforms, but the origin of the rotation is changed from the default center to -20px -50px.

Browser Support

Can I Use transforms2d? Data on support for the transform-origin feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles

A Primer on CSS3 Transforms