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
The '3D transform functions' here extend the set of functions for the 'transform' property.
51
51
52
52
Some values of 'perspective', 'transform-style' and 'backface-visibility' result in the creation of a <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, and/or the creation of a <a spec="css21">stacking context</a>.
53
-
53
+
54
54
Three-dimensional transforms affect the visual layering of elements, and thus override the back-to-front painting order described in <a href="https://www.w3.org/TR/CSS2/zindex.html">Appendix E</a> of [[!CSS21]].
55
55
56
56
@@ -137,7 +137,7 @@ Three-dimensional transform functions extend this coordinate space into three di
137
137
138
138
<p id="transformation-matrix-computation">
139
139
The <a>transformation matrix</a> is computed from the 'transform' and 'transform-origin' properties as follows:
140
-
140
+
141
141
1. Start with the identity matrix.
142
142
2. Translate by the computed X, Y and Z of 'transform-origin'
143
143
3. Multiply by each of the transform functions in 'transform' property from left to right
@@ -733,7 +733,7 @@ The values for 'perspective-origin' represent an offset of the perspective origi
733
733
734
734
</dl>
735
735
736
-
'perspective-origin' is a <a>resolved value special case property</a>. The <a>resolved value</a> of 'perspective-origin' is the <a>used value</a> (i.e., percentages are resolved to absolute lengths).
736
+
The 'perspective-origin'property is a <a>resolved value special case property like 'height'</a>. [[!CSSOM]]
737
737
738
738
The 'backface-visibility' Property {#backface-visibility-property}
@@ -118,7 +118,7 @@ When used in this specification, terms have the meanings assigned in this sectio
118
118
:: A transformable element is an element in one of these categories:
119
119
* an element whose layout is governed by the CSS box model which is either a <a href="https://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> or <a href="https://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>, or whose 'display' property computes to ''table-row'', ''table-row-group'', ''table-header-group'', ''table-footer-group'', ''table-cell'', or ''table-caption''[[!CSS21]]
120
120
* an element in the SVG namespace and not governed by the CSS box model which has the attributes 'transform', <{pattern/patternTransform}> or <{linearGradient/gradientTransform}>[[!SVG11]].
121
-
121
+
122
122
: <dfn>transformed element</dfn>
123
123
:: An element with a computed value other than ''transform/none'' for the 'transform' property.
124
124
@@ -153,7 +153,7 @@ The coordinate space is a coordinate system with two axes: the X axis increases
153
153
154
154
<p id="transformation-matrix-computation">
155
155
The [=transformation matrix=] is computed from the 'transform' and 'transform-origin' properties as follows:
156
-
156
+
157
157
1. Start with the identity matrix.
158
158
2. Translate by the computed X and Y of 'transform-origin'
159
159
3. Multiply by each of the transform functions in 'transform' property from left to right
@@ -315,7 +315,7 @@ If two or more values are defined and either no value is a keyword, or the only
315
315
:: 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.
316
316
</dl>
317
317
318
-
'transform-origin' is a <a>resolved value special case property</a>. The <a href="https://www.w3.org/TR/cssom/#resolved-value">resolved value</a> of 'transform-origin' is the [=used value=] (i.e., percentages are resolved to absolute lengths).
318
+
The 'transform-origin'property is a <a>resolved value special case property like 'height'</a>. [[!CSSOM]]
319
319
320
320
321
321
Transform reference box: the 'transform-box' property {#transform-box}
@@ -344,7 +344,7 @@ All transformations defined by the 'transform' and 'transform-origin' property a
344
344
345
345
: <dfn dfn-type=value>view-box</dfn>
346
346
:: Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.
347
-
347
+
348
348
If a {{viewBox}} attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element:
349
349
* The reference box is positioned at the origin of the coordinate system established by the {{viewBox}} attribute.
350
350
* The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the {{viewBox}} attribute.
0 commit comments