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
+27-3Lines changed: 27 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
<pre class='metadata'>
2
2
Title: CSS Transforms Module Level 1
3
-
Status: WD
3
+
Status: ED
4
4
Work Status: Refining
5
5
ED: https://drafts.csswg.org/css-transforms/
6
6
TR: https://www.w3.org/TR/css-transforms-1/
@@ -120,9 +120,14 @@ When used in this specification, terms have the meanings assigned in this sectio
120
120
121
121
: <dfn>transformable element</dfn>
122
122
:: A transformable element is an element in one of these categories:
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
-
* 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]].
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
+
* 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?
127
+
128
+
Issue(908): How do transforms apply to inlines?
129
+
130
+
Issue(358): Adapte SVG2's content model for transformable elements.
126
131
: <dfn>transformed element</dfn>
127
132
:: An element with a computed value other than ''transform/none'' for the 'transform' property.
128
133
@@ -167,6 +172,8 @@ Transforms apply to [=transformable elements=].
167
172
168
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]].
169
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.
176
+
170
177
<div class="example">
171
178
<pre>
172
179
div {
@@ -360,8 +367,11 @@ All transformations defined by the 'transform' and 'transform-origin' property a
360
367
* The reference box is positioned at the origin of the coordinate system established by the {{viewBox}} attribute.
361
368
* The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the {{viewBox}} attribute.
362
369
370
+
Issue(999): Follow used value definition of Fill and Stroke specs/SVG2?
363
371
</dl>
364
372
373
+
Issue(892): Clarify what the reference box of paint servers, <a element>clipPath</a> and <a element>mask</a> is.
374
+
365
375
A reference box adds an additional offset to the origin specified by the 'transform-origin' property.
366
376
367
377
For SVG elements without an associated CSS layout box, the [=used value=] for <a value for=transform-box>border-box</a> is <a value for=transform-box>view-box</a>.
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.
376
386
387
+
Issue(919) Can patternTransform or gradientTransform or transform attributes apply to one element? If yes, which is the most significant?
388
+
377
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]].
@@ -470,6 +482,8 @@ In particular the <{pattern/patternUnits}>, <{linearGradient/gradientUnits}> and
470
482
471
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=].
472
484
485
+
Issue(893): User coordinate space statement breaks SVG.
486
+
473
487
<div class="example">
474
488
475
489
The 'transform-origin' property on the pattern in the following example specifies a ''50%'' translation of the origin in the horizontal and vertical dimension. The 'transform' property specifies a translation as well, but in absolute lengths.
@@ -518,6 +532,8 @@ With this specification, the <{animate}> element and the <{set}> element can ani
518
532
519
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]].
522
538
523
539
<var ignore=''>To</var> animations on <{animate}> provide specific functionality to get a smooth change from the underlying value to the <var ignore=''>to</var> attribute value, which conflicts mathematically with the requirement for additive transform animations to be post-multiplied. As a consequence, the behavior of <var ignore=''>to</var> animations for <{animate}> is undefined. Authors are suggested to use <var ignore=''>from-to</var>, <var ignore=''>from-by</var>, <var ignore=''>by</var> or <var ignore=''>values</var> animations to achieve any desired transform animation.
@@ -564,6 +580,8 @@ Some animations require a neutral element for addition. For transform functions
564
580
565
581
Note: Animations to or from the neutral element of additions <<matrix()>> fall back to discrete animations (See [[#matrix-interpolation]]).
566
582
583
+
Issue(932): Replace text and simply refer to `null` value?
584
+
567
585
<div class="example">
568
586
569
587
A <var>by</var> animation with a by value v<sub>b</sub> is equivalent to the same animation with a values list with 2 values, the neutral element for addition for the domain of the target attribute (denoted 0) and v<sub>b</sub>, and ''additive="sum"''. [[SMIL3]]
@@ -734,6 +752,8 @@ When animating or transitioning transforms, the transform function lists must be
734
752
735
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.
736
754
755
+
Issue(927): Use proposed tranform interpolation from GitHub issue.
756
+
737
757
Transform function primitives and derivatives {#transform-primitives}
0 commit comments