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
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -123,11 +123,11 @@ When used in this specification, terms have the meanings assigned in this sectio
123
123
* 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]]
124
124
* an element in the SVG namespace and not governed by the CSS box model which has the attributes <a element-attr for>transform</a>, <{pattern/patternTransform}> or <{linearGradient/gradientTransform}>[[!SVG11]].
125
125
126
-
Issue(2033): Too restrictive and replace black list with white list?
126
+
Issue(w3c/csswg-drafts#2033): Too restrictive and replace black list with white list?
127
127
128
-
Issue(908): How do transforms apply to inlines?
128
+
Issue(w3c/csswg-drafts#908): How do transforms apply to inlines?
129
129
130
-
Issue(358): Adapte SVG2's content model for transformable elements.
130
+
Issue(w3c/csswg-drafts#358): Adapte SVG2's content model for transformable elements.
131
131
: <dfn>transformed element</dfn>
132
132
:: An element with a computed value other than ''transform/none'' for the 'transform' property.
133
133
@@ -145,7 +145,7 @@ When used in this specification, terms have the meanings assigned in this sectio
145
145
: <dfn>2D matrix</dfn>
146
146
:: A 3x2 transformation matrix with 6 items or a 4x4 matrix with 16 items, where the items m<sub>31</sub>, m<sub>32</sub>, m<sub>13</sub>, m<sub>23</sub>, m<sub>43</sub>, m<sub>14</sub>, m<sub>24</sub>, m<sub>34</sub> are equal to ''0'' and m<sub>33</sub>, m<sub>44</sub> are equal to ''1''.
147
147
148
-
Issue: should this spec mention 4x4 matrices?
148
+
Issue(w3c/csswg-drafts#2186): should this spec mention 4x4 matrices?
149
149
150
150
: <dfn>identity transform function</dfn>
151
151
:: A <a href="#transform-functions">transform function</a> that is equivalent to a identity 4x4 matrix (see <a href="#mathematical-description">Mathematical Description of Transform Functions</a>). Examples for identity transform functions are ''translate(0)'', ''translateX(0)'', ''translateY(0)'', ''scale(1)'', ''scaleX(1)'', ''scaleY(1)'', ''rotate(0)'', ''skew(0, 0)'', ''skewX(0)'', ''skewY(0)'' and ''matrix(1, 0, 0, 1, 0, 0)''.
@@ -172,7 +172,7 @@ Transforms apply to [=transformable elements=].
172
172
173
173
Note: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow. Transforms are also taken into account when computing client rectangles exposed via the Element Interface Extensions, namely <a href="https://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects()</a> and <a href="https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect()</a>, which are specified in [[CSSOM-VIEW]].
174
174
175
-
Issue(901): Overflow bounds that are computed at the end of layout can increase (but not decrease) by paint-level effects such as transforms.
175
+
Issue(w3c/csswg-drafts#901): Overflow bounds that are computed at the end of layout can increase (but not decrease) by paint-level effects such as transforms.
176
176
177
177
<div class="example">
178
178
<pre>
@@ -235,7 +235,7 @@ For elements whose layout is governed by the CSS box model, any value other than
235
235
236
236
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.
237
237
238
-
Issue(913): Is this effect on ''position: fixed'' necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it's much harder to implement otherwise.
238
+
Issue(w3c/csswg-drafts#913): Is this effect on ''position: fixed'' necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it's much harder to implement otherwise.
239
239
240
240
<a href="https://www.w3.org/TR/css3-background/#fixed0">Fixed backgrounds</a> on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of ''fixed'' for the 'background-attachment' property is treated as if it had a value of ''background-attachment/scroll''. The computed value of 'background-attachment' is not affected.
241
241
@@ -274,7 +274,7 @@ Serialization of the computed value of <<transform-list>> {#serialization-of-the
274
274
275
275
A <<transform-list>> for the computed value is serialized to one <<matrix()>> function by the following algorithm:
276
276
277
-
Issue: keep 4x4 matrix here and below?
277
+
Issue(w3c/csswg-drafts#2186): keep 4x4 matrix here and below?
278
278
279
279
<ol class="algorithm">
280
280
1. Let <var>transform</var> be a 4x4 matrix initialized to the identity matrix. The elements <var ignore> m11</var>, <var ignore>m22</var>, <var ignore>m33</var> and <var ignore>m44</var> of <var>transform</var> must be set to ''1'' all other elements of <var>transform</var> must be set to ''0''.
@@ -367,10 +367,10 @@ All transformations defined by the 'transform' and 'transform-origin' property a
367
367
* The reference box is positioned at the origin of the coordinate system established by the {{viewBox}} attribute.
368
368
* The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the {{viewBox}} attribute.
369
369
370
-
Issue(999): Follow used value definition of Fill and Stroke specs/SVG2?
370
+
Issue(w3c/csswg-drafts#999): Follow used value definition of Fill and Stroke specs/SVG2?
371
371
</dl>
372
372
373
-
Issue(892): Clarify what the reference box of paint servers, <a element>clipPath</a> and <a element>mask</a> is.
373
+
Issue(w3c/csswg-drafts#892): Clarify what the reference box of paint servers, <a element>clipPath</a> and <a element>mask</a> is.
374
374
375
375
A reference box adds an additional offset to the origin specified by the 'transform-origin' property.
The SVG 1.1 specification did not specify the attributes <a element-attr for>transform</a>, <{linearGradient/gradientTransform}> or <{pattern/patternTransform}> as <a>presentation attributes</a>[[!SVG11]]. In order to improve the integration of SVG and HTML, this specification makes these SVG attributes presentation attributes and makes the 'transform' property one that applies to [=transformable elements=] in the SVG namespace.
386
386
387
-
Issue(919) Can patternTransform or gradientTransform or transform attributes apply to one element? If yes, which is the most significant?
387
+
Issue(w3c/csswg-drafts#919) Can patternTransform or gradientTransform or transform attributes apply to one element? If yes, which is the most significant?
388
388
389
389
This specification will also introduce the new presentation attribute 'transform-origin'. Values on this presentation attribute get parsed following the syntax rules on <a href="#svg-data-types">SVG Data Types</a>[[!SVG11]].
390
390
@@ -482,7 +482,7 @@ In particular the <{pattern/patternUnits}>, <{linearGradient/gradientUnits}> and
482
482
483
483
For all other [=transformable elements=] the <a element-attr for>transform</a> presentation attribute represents values in the current user coordinate system of the parent. All percentage values of the <a element-attr for>transform</a> presentation attribute are relative to the element's [=reference box=].
484
484
485
-
Issue(893): User coordinate space statement breaks SVG.
485
+
Issue(w3c/csswg-drafts#893): User coordinate space statement breaks SVG.
486
486
487
487
<div class="example">
488
488
@@ -532,7 +532,7 @@ With this specification, the <{animate}> element and the <{set}> element can ani
532
532
533
533
The animation effect is post-multiplied to the underlying value for additive <{animate}> animations (see below) instead of added to the underlying value, due to the specific behavior of <<transform-list>> animations.
<var ignore=''>From-to</var>, <var ignore=''>from-by</var> and <var ignore=''>by</var> animations are defined in SMIL to be equivalent to a corresponding <var>values</var> animation. However, <var ignore=''>to</var> animations are a mixture of additive and non-additive behavior [[SMIL3]].
538
538
@@ -580,7 +580,7 @@ Some animations require a neutral element for addition. For transform functions
580
580
581
581
Note: Animations to or from the neutral element of additions <<matrix()>> fall back to discrete animations (See [[#matrix-interpolation]]).
582
582
583
-
Issue(932): Replace text and simply refer to `null` value?
583
+
Issue(w3c/csswg-drafts#932): Replace text and simply refer to `null` value?
584
584
585
585
<div class="example">
586
586
@@ -752,7 +752,7 @@ When animating or transitioning transforms, the transform function lists must be
752
752
753
753
In some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered.
754
754
755
-
Issue(927): Use proposed tranform interpolation from GitHub issue.
755
+
Issue(w3c/csswg-drafts#927): Use proposed tranform interpolation from GitHub issue.
756
756
757
757
Transform function primitives and derivatives {#transform-primitives}
0 commit comments