HTML and CSS Reference
In-Depth Information
transform-origin
This property is used to establish the point of origin when applying a transformation on
an element.
Syntax
transform-origin:
percentage
|
length
| left | center | right [
percentage
|
length
| top | center | bottom ]
where the first value is either a percentage, a CSS length (which may be negative), or a keyword
specifying the horizontal position, and the second value specifies the vertical position.
If a single value is set, it is assumed to be horizontal and the vertical value is set to 50%.
Examples
<img src="logo.gif">
<p> </p>
<img src="logo.gif" style="-moz-transform: skewX(55deg);-webkit-transform:
skewX(55deg);">
<p> </p>
<img src="logo.gif" style="-moz-transform: skewX(55deg);-moz-transform-
origin: 0% 0%;-webkit-transform: skewX(55deg);-webkit-transform-origin: 0%
0%;">
Original Skew
Original Changed
Compatibility
CSS3
Chrome 2+, Firefox 3.5+, Safari 3.1+
Notes
• Firefox supports this property as
-moz-transform-origin
and WebKit supports it
as
-webkit-transform-origin
.
• At the time of this edition's writing, Safari has added in 3-D support to its
development builds for Macs. If the transformation is in 3-D, a third number is
expected specifying the z origin. The format is the same as x and y origins.
