You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>The values of the <aclass=propertydata-link-type=propdeschref=#propdef-transformtitle=transform>transform</a> and <aclass=propertydata-link-type=propdeschref=#propdef-transform-origintitle=transform-origin>transform-origin</a> properties are used to compute the <adata-link-type=dfnhref=#transformation-matrixtitle="transformation matrix">transformation matrix</a>, as described above.
775
775
776
-
<p>If only one value is specified, the second value is assumed to be <aclass=cssdata-link-type=maybehref=#valuedef-center0title=center>center</a>. If one or two values are specified, the third value is assumed to be <spanclass=cssdata-link-type=maybetitle=0px>0px</span>.
776
+
<p>If only one value is specified, the second value is assumed to be <aclass=css-codedata-link-for=transform-origindata-link-type=valuehref=#valuedef-center0title=center>center</a>. If one or two values are specified, the third value is assumed to be <spanclass=cssdata-link-type=maybetitle=0px>0px</span>.
777
777
778
-
<p>If two or more values are defined and either no value is a keyword, or the only used keyword is <aclass=cssdata-link-type=maybehref=#valuedef-center0title=center>center</a>, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#length-valuetitle="<length>"><length></a>.
778
+
<p>If two or more values are defined and either no value is a keyword, or the only used keyword is <aclass=css-codedata-link-for=transform-origindata-link-type=valuehref=#valuedef-center0title=center>center</a>, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#length-valuetitle="<length>"><length></a>.
For SVG elements without an associated CSS layout box the horizontal and vertical offset represent an offset from the point of origin of the element’s local coordinate space.
Computes to <spanclass=cssdata-link-type=maybetitle=50%>50%</span> (<spanclass=cssdata-link-type=maybetitle="left 50%">left 50%</span>) for the horizontal position if the horizontal position is not otherwise specified, or <spanclass=cssdata-link-type=maybetitle=50%>50%</span> (<spanclass=cssdata-link-type=maybetitle="top 50%">top 50%</span>) for the vertical position if it is.
<tableclass=propdef><tr><th>Name:<td><dfnclass=css-codedata-dfn-type=propertydata-export="" id=propdef-perspective-origin>perspective-origin<aclass=self-linkhref=#propdef-perspective-origin></a></dfn><tr><th>Value:<td> [ left | center | right | top | bottom | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#percentage-valuetitle="<percentage>"><percentage></a> | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#length-valuetitle="<length>"><length></a> ]<br> |<br> [ left | center | right | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#percentage-valuetitle="<percentage>"><percentage></a> | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#length-valuetitle="<length>"><length></a> ]<br> [ top | center | bottom | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#percentage-valuetitle="<percentage>"><percentage></a> | <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#length-valuetitle="<length>"><length></a> ]<br> |<br> [ center | [ left | right ] ] && [ center | [ top | bottom ] ]<tr><th>Initial:<td>50% 50%<tr><th>Applies to:<td><adata-link-type=dfnhref=#transformable-elementtitle="transformable elements">transformable elements</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>For <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#length-valuetitle="<length>"><length></a> the absolute value, otherwise a percentage.<tr><th>Percentages:<td>refer to the size of the <adata-link-type=dfnhref=#bounding-boxtitle="bounding box">bounding box</a><tr><th>Animatable:<td>as <ahref=http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list>simple list</a> of <ahref=http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc>length, percentage, or calc</a></table>
921
921
<p>The values of the <aclass=propertydata-link-type=propdeschref=#propdef-perspectivetitle=perspective>perspective</a> and <aclass=propertydata-link-type=propdeschref=#propdef-perspective-origintitle=perspective-origin>perspective-origin</a> properties are used to compute the <adata-link-type=dfnhref=#perspective-matrixtitle="perspective matrix">perspective matrix</a>, as described above.
922
922
923
-
<p>If only one value is specified, the second value is assumed to be <aclass=cssdata-link-type=maybehref=#valuedef-center0title=center>center</a>.
923
+
<p>If only one value is specified, the second value is assumed to be <aclass=css-codedata-link-for=perspective-origindata-link-type=valuehref=#valuedef-centertitle=center>center</a>.
924
924
925
925
<p>If at least one of the two values is not a keyword, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset).
Computes to <spanclass=cssdata-link-type=maybetitle=50%>50%</span> (<spanclass=cssdata-link-type=maybetitle="left 50%">left 50%</span>) for the horizontal position if the horizontal position is not otherwise specified, or <spanclass=cssdata-link-type=maybetitle=50%>50%</span> (<spanclass=cssdata-link-type=maybetitle="top 50%">top 50%</span>) for the vertical position if it is.
The values of the 'transform' and 'transform-origin' properties are used to compute the <i>transformation matrix</i>, as described above.
739
739
740
-
If only one value is specified, the second value is assumed to be ''center''. If one or two values are specified, the third value is assumed to be ''0px''.
740
+
If only one value is specified, the second value is assumed to be <avaluefor=transform-origin>center</a>. If one or two values are specified, the third value is assumed to be ''0px''.
741
741
742
-
If two or more values are defined and either no value is a keyword, or the only used keyword is ''center'', then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <<length>>.
742
+
If two or more values are defined and either no value is a keyword, or the only used keyword is <avaluefor=transform-origin>center</a>, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <<length>>.
For SVG elements without an associated CSS layout box the horizontal and vertical offset represent an offset from the point of origin of the element's local coordinate space.
757
757
</p>
758
758
</dd>
759
-
<dt><dfn>''top''</dfn>
759
+
<dt><dfn>top</dfn>
760
760
<dd>Computes to ''0%'' for the vertical position.
761
-
<dt><dfn>''right''</dfn>
761
+
<dt><dfn>right</dfn>
762
762
<dd>Computes to ''100%'' for the horizontal position.
763
-
<dt><dfn>''bottom''</dfn>
763
+
<dt><dfn>bottom</dfn>
764
764
<dd>Computes to ''100%'' for the vertical position.
765
-
<dt><dfn>''left''</dfn>
765
+
<dt><dfn>left</dfn>
766
766
<dd>Computes to ''0%'' for the horizontal position.
767
-
<dt><dfn>''center''</dfn>
767
+
<dt><dfn>center</dfn>
768
768
<dd>
769
769
Computes to ''50%'' (''left 50%'') for the horizontal position if the horizontal position is not otherwise specified, or ''50%'' (''top 50%'') for the vertical position if it is.
The values of the 'perspective' and 'perspective-origin' properties are used to compute the <i>perspective matrix</i>, as described above.
919
919
920
-
If only one value is specified, the second value is assumed to be ''center''.
920
+
If only one value is specified, the second value is assumed to be <avaluefor=perspective-origin>center</a>.
921
921
922
922
If at least one of the two values is not a keyword, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset).
and vertical offset represent an offset from the top left corner of the
941
941
<i>bounding box</i>.
942
942
</dd>
943
-
<dt><dfn>''top''</dfn></dt>
943
+
<dt><dfn>top</dfn></dt>
944
944
<dd>Computes to ''0%'' for the vertical position.</dd>
945
-
<dt><dfn>''right''</dfn></dt>
945
+
<dt><dfn>right</dfn></dt>
946
946
<dd>Computes to ''100%'' for the horizontal position.</dd>
947
-
<dt><dfn>''bottom''</dfn></dt>
947
+
<dt><dfn>bottom</dfn></dt>
948
948
<dd>Computes to ''100%'' for the vertical position.</dd>
949
-
<dt><dfn>''left''</dfn></dt>
949
+
<dt><dfn>left</dfn></dt>
950
950
<dd>Computes to ''0%'' for the horizontal position.</dd>
951
-
<dt><dfn>''center''</dfn></dt>
951
+
<dt><dfn>center</dfn></dt>
952
952
<dd>
953
953
Computes to ''50%'' (''left 50%'') for the horizontal position if the horizontal position is not otherwise specified, or ''50%'' (''top 50%'') for the vertical position if it is.
0 commit comments