Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Not explicitly set values are reset to their corresponding values.

Initial value50% 50% 0
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Mediavisual
Computed valuefor <length> the absolute value, otherwise a percentage
Animatableyes, as a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Canonical orderOne or two values, with length made absolute and keywords translated to percentages

Syntax

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset y-offset */
transform-origin: 3cm 2px;

/* y-offset x-offset-keyword */
transform-origin: 2px left;

/* x-offset-keyword y-offset */
transform-origin: left 2px;

/* x-offset-keyword y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword x-offset-keyword */
transform-origin: top right;

/* x-offset y-offset z-offset */
transform-origin: 2px 30% 10px;

/* y-offset x-offset-keyword z-offset */
transform-origin: 2px left 10px;

/* x-offset-keyword y-offset z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword y-offset-keyword z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword x-offset-keyword z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

Values

x-offset
Is a <length> or a <percentage> describing how far from the left edge of the box the origin of the transform is set.
offset-keyword
Is one of the left, right, top, bottom or center keyword describing the corresponding offset.
y-offset
Is a <length> or a <percentage> describing how far from the top edge of the box the origin of the transform is set.
x-offset-keyword
Is one of the left, right or center keyword describing how far from the left edge of the box the origin of the transform is set.
y-offset-keyword
Is one of the top, bottom or center keyword describing how far from the top edge of the box the origin of the transform is set.
z-offset
Is a <length> (and never a <percentage> which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

The keywords are convenience shorthands and match the following <percentage> values:

keyword value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Formal syntax

[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?
where 
<length-percentage> = <length> | <percentage>

Examples

See Using CSS transforms for examples.

Live Examples

Code Sample

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -10em -30em;

transform: scale(1.9);

transform: scale(1.9);
transform-origin: 0 0;

transform: scale(1.9);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

Specifications

Specification Status Comment
CSS Transforms Level 1
The definition of 'transform-origin' in that specification.		 Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) -webkit 3.5 (1.9.1)-moz
16.0 (16.0)[2]		 9.0-ms
10.0		 10.5-o
12.10		 3.1-webkit
Three-value syntax (Yes) -webkit 10 (10)-moz
16.0 (16.0)		 5.5 (partial) [1]
9.0 -ms
10.0		 No support (Yes) -webkit
Support in SVG (Yes) 41 (41)[4]
43 (43)[5]		 No support (Yes) ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? 8.1 -webkit[3] ? ?
Three-value syntax ? ? ? ? No support ?
Support in SVG ? 41 (41)[4]
43 (43)[5]		 ? ? ? ?

[1] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve similar effects.

[2] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] See MSDN transform-origin documentation.

[4] Percentage handling for transform-origin values for SVG elements was behind the preference svg.transform-origin.enabled, defaulting to false. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

[5] Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

See also

Documentlabels en -medewerkers

Labels: 
 Aan deze pagina hebben bijgedragen: Sebastianz, Simplexible, Prinz_Rana, jwhitlock, jigs12, teoli, johndrinkwater, fscholz, matthewspencer, Jeremie, wbamberg, tregagnon, cvrebert, ahallicks66, Yemster, Majr, RahulKapuriya12692, XiangHongAi, Agamemnus, kscarfone, Sheppy, jimbones, ethertank, CutenessOverload, FredB, myakura, Jürgen Jeka, Level, j.j.
 Laatst bijgewerkt door: Sebastianz,