CSS3 Click Chart | CSS3 Browser Support and Information

Rotate Transforms

Allows you to define horizontal and vertical offsets to change the origin, or anchor point, of the transform.

Specification

Example Code

.element {
    -webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
    -moz-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;
    transform-origin: 20px 20px;
}

Live Demonstration

This box is rotated using CSS3 transforms, but the origin of the rotation is changed from the default center.

Desktop Browser Support

Three-value Standard Syntax:
Firefox 16+, IE10+

Three-value Vendor Syntax:
Firefox 10+, Chrome (?), Safari (?)

Standard Syntax:
IE10+, Opera 12.1+

Vendor Prefix:
IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

Tools / Polyfills

cssSandpaper
Transformie

Tutorials / Articles

A Primer on CSS3 Transforms (SitePoint) transform-origin on MDN