Transform-origin

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%; }
.ss64class { transform-origin: left bottom; }

#SS64id { 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.


© Copyright SS64.com 1999-2014
Some rights reserved