Change the position (origin) of elements that have been transformed. By default, transforms are applied using the center point of an element as the origin; for example rotation spins an object about its center and scaling expands or contracts an element from the center point. Change this origin by setting transform-origin.
Syntax
transform-origin: x-axis y-axis z-axis ;
x-axis - Move the origin horizontally : left | center | right | length | %
y-axis - Move the origin vertically: top | center | bottom | length | %
z-axis - Move the origins z-axis (stack): length
The values left and top are equivalent to 0% (zero length/height)
The value center is equivalent to 50% (half box length/height)
The values right and bottom are equivalent to 100% (full box length/height)
Examples:
h1 { transform-origin: 30% 60%; }
.emw3class { transform-origin: left bottom; }
#emw3id { transform-origin: 30% 60% 25%; }
Try it:
For most transitions a timing of between 0.5 and 2 seconds will give the best results. Reloading the page will return the text to its starting position. |
(CSS 3) Browser Support: IE 10, Firefox. Use the equivalent -webkit-transform-origin for Safari and Chrome, -ms-transform-origin for IE 9 and -moz-transform-origin for old Firefox versions.
“Don't become a mere recorder of facts, but try to penetrate the mystery of their origin” ~ Ivan Pavlov
Related:
transform - Apply a 2D or 3D transformation to an element.
transform-style - How nested elements are rendered in 3D space.
transition - Shorthand to set transition- properties.