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
Abstract:This module contains the features of CSS level 3 relating to positioning and stacking of elements. It includes and extends the functionality of CSS level 2 ([[!CSS21]]), which builds on CSS level 1 [[CSS1]]. The main extensions compared to level 2 are the ability to position elements based on CSS Region boxes, the ability to specify different containing blocks for elements and sticky positioning. <p>Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules. Also, the layout of text inside each line is defined elsewhere.
17
+
Abstract:This module contains the features of CSS level 3 relating to positioning and stacking of elements. It includes and extends the functionality of CSS level 2 ([[!CSS2]]), which builds on CSS level 1 [[CSS1]]. The main extensions compared to level 2 are the ability to position elements based on CSS Region boxes, the ability to specify different containing blocks for elements and sticky positioning. <p>Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules. Also, the layout of text inside each line is defined elsewhere.
Copy file name to clipboardExpand all lines: css-transforms/Overview.bs
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -96,7 +96,7 @@ This coordinate space can be modified with the 'transform' property. Using trans
96
96
Module Interactions {#module-interactions}
97
97
------------------------------------------
98
98
99
-
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html">visual formatting model</a> from [[!CSS21]]. Some values of these properties 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>.
99
+
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html">visual formatting model</a> from [[!CSS2]]. Some values of these properties 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>.
100
100
101
101
Transforms affect the rendering of backgrounds on elements with a value of ''fixed'' for the 'background-attachment' property, which is specified in [[!CSS3BG]].
102
102
@@ -121,7 +121,7 @@ When used in this specification, terms have the meanings assigned in this sectio
121
121
122
122
: <dfn>transformable element</dfn>
123
123
:: A transformable element is an element in one of these categories:
124
-
* 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]]
124
+
* 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''[[!CSS2]]
125
125
* 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]].
126
126
127
127
: <dfn>transformed element</dfn>
@@ -225,7 +225,7 @@ Note that an identical rendering can be obtained by nesting elements with the eq
225
225
226
226
For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the 'overflow' property is ''overflow/scroll'' or ''overflow/auto'', scrollbars will appear as needed to see content that is transformed outside the visible area.
227
227
228
-
For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’. If an element with a transform is positioned, the ‘z-index’ property applies as described in [[!CSS21]], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created
228
+
For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’. If an element with a transform is positioned, the ‘z-index’ property applies as described in [[!CSS2]], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created
229
229
230
230
For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.
231
231
@@ -406,7 +406,7 @@ Because of the participation to the CSS cascade, the 'transform' style property
406
406
Syntax of the SVG 'transform' attribute {#svg-syntax}
407
407
---------------------------------------
408
408
409
-
To provide backwards compatibility, the syntax of the 'transform' presentation attribute differs from the syntax of the 'transform' style property as shown in the example above. However, the syntax used for the 'transform' style property can be used for a 'transform' presentation attribute value. Authors are advised to follow the rules of CSS Values and Units Module [[!CSS3VAL]]. Therefore an author should write ''transform="translate(200px, 200px)"'' instead of ''transform="translate (200 200)"'' because the second example with the spaces before the ''('', the missing comma between the arguments and the values without the explicit unit notation would be valid for the attribute only.
409
+
To provide backwards compatibility, the syntax of the 'transform' presentation attribute differs from the syntax of the 'transform' style property as shown in the example above. However, the syntax used for the 'transform' style property can be used for a 'transform' presentation attribute value. Authors are advised to follow the rules of CSS Values and Units Module [[!CSS-VALUES-3]]. Therefore an author should write ''transform="translate(200px, 200px)"'' instead of ''transform="translate (200 200)"'' because the second example with the spaces before the ''('', the missing comma between the arguments and the values without the explicit unit notation would be valid for the attribute only.
410
410
411
411
### Transform List ### {#svg-transform-list}
412
412
@@ -420,7 +420,7 @@ Note: Unlike SVG 1.1, this specification does not allow optional whitespace betw
420
420
421
421
### SVG Data Types ### {#svg-data-types}
422
422
423
-
Arguments on all new introduced presentation attributes consist of data types in the sense of CSS Values and Units Module [[!CSS3VAL]]. The definitions of data types in CSS Values and Units Module are enhanced as follows:
423
+
Arguments on all new introduced presentation attributes consist of data types in the sense of CSS Values and Units Module [[!CSS-VALUES-3]]. The definitions of data types in CSS Values and Units Module are enhanced as follows:
424
424
425
425
#### The <<length>> type #### {#svg-transform-value}
0 commit comments