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
Copy file name to clipboardExpand all lines: css-transforms-1/Overview.bs
+11-7Lines changed: 11 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -111,7 +111,7 @@ This coordinate space can be modified with the 'transform' property. Using trans
111
111
Module Interactions {#module-interactions}
112
112
------------------------------------------
113
113
114
-
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>.
114
+
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>stacking context</a>.
115
115
116
116
Transforms affect the rendering of backgrounds on elements with a value of ''fixed'' for the 'background-attachment' property, which is specified in [[!CSS3BG]].
All transformations defined by the 'transform' and 'transform-origin' property are relative to the position and dimensions of the <dfn>reference box</dfn> of the element. The [=reference box=] is specified by one of the following:
430
430
431
431
<dl dfn-for=transform-box>
432
+
: <dfn dfn-type=value>content-box</dfn>
433
+
:: Uses the content box as reference box. The reference box of a table is the border box of its <a href="https://www.w3.org/TR/CSS21/tables.html#model">table wrapper box</a>, not its table box.
434
+
432
435
: <dfn dfn-type=value>border-box</dfn>
433
436
:: Uses the border box as reference box. The reference box of a table is the border box of its <a href="https://www.w3.org/TR/CSS21/tables.html#model">table wrapper box</a>, not its table box.
434
437
435
438
: <dfn dfn-type=value>fill-box</dfn>
436
439
:: Uses the <a>object bounding box</a> as reference box.
437
440
441
+
: <dfn dfn-type=value>stroke-box</dfn>
442
+
:: Uses the <a>stroke bounding box</a> as reference box.
443
+
438
444
: <dfn dfn-type=value>view-box</dfn>
439
445
:: Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.
440
446
441
447
If a {{viewBox}} attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element:
442
448
* The reference box is positioned at the origin of the coordinate system established by the {{viewBox}} attribute.
443
449
* The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the {{viewBox}} attribute.
444
-
445
-
Issue(w3c/csswg-drafts#999): Follow used value definition of Fill and Stroke specs/SVG2?
446
450
</dl>
447
451
448
452
For the SVG <{pattern}> element, the reference box gets defined by the <{pattern/patternUnits}> attribute [[!SVG2]].
@@ -453,10 +457,9 @@ For the SVG <a element>clipPath</a> element, the reference box gets defined by t
453
457
454
458
A reference box adds an additional offset to the origin specified by the 'transform-origin' property.
455
459
456
-
For SVG elements without an associated CSS layout box, the [=used value=] for ''transform-box/border-box'' is ''transform-box/view-box''.
457
-
458
-
For elements with an associated CSS layout box, the [=used value=] for ''transform-box/fill-box'' and ''transform-box/view-box'' is ''transform-box/border-box''.
460
+
For SVG elements without associated CSS layout box, the [=used value=] for ''transform-box/content-box'' is ''transform-box/fill-box'' and for ''transform-box/border-box'' is ''transform-box/stroke-box''.
459
461
462
+
For elements with associated CSS layout box, the [=used value=] for ''transform-box/fill-box'' is ''transform-box/content-box'' and for ''transform-box/stroke-box'' and ''transform-box/view-box'' is ''transform-box/border-box''.
460
463
461
464
The SVG <a element-attr for>transform</a> Attribute {#svg-transform}
0 commit comments