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
Resolvew3c#2186: keep 4x4 matrices here, but remove any mention of 3d transform functions from transforms-1, and duplicate the "Transform function primitives and derivatives" section into transforms-2 for the 3D functions. Improve the wording a little.
Copy file name to clipboardExpand all lines: css-transforms-1/Overview.bs
+19-48Lines changed: 19 additions & 48 deletions
Original file line number
Diff line number
Diff line change
@@ -145,8 +145,6 @@ 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(w3c/csswg-drafts#2186): should this spec mention 4x4 matrices?
149
-
150
148
: <dfn>identity transform function</dfn>
151
149
:: 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)''.
152
150
@@ -274,18 +272,10 @@ Serialization of the computed value of <<transform-list>> {#serialization-of-the
274
272
275
273
A <<transform-list>> for the computed value is serialized to one <<matrix()>> function by the following algorithm:
276
274
277
-
Issue(w3c/csswg-drafts#2186): keep 4x4 matrix here and below?
278
-
279
275
<ol class="algorithm">
280
276
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''.
281
277
2. Post-multiply all <<transform-function>>s in <<transform-list>> to <var>transform</var>.
282
-
3. Chose between <<matrix()>> or <<matrix3d()>> serialization:
283
-
<dl class="switch">
284
-
<dt>If <var>transform</var> is a [=2D matrix=]
285
-
<dd>Serialize <var>transform</var> to a <<matrix()>> function.
286
-
<dt>Otherwise
287
-
<dd>Serialize <var>transform</var> to a <<matrix3d()>> function.
288
-
</dl>
278
+
3. Serialize <var>transform</var> to a <<matrix()>> function.
289
279
</ol>
290
280
291
281
The 'transform-origin' Property {#transform-origin-property}
@@ -668,6 +658,24 @@ A percentage for vertical translations is relative to the height of the [=refere
668
658
</dl>
669
659
670
660
661
+
Transform function primitives and derivatives {#transform-primitives}
662
+
---------------------------------------------
663
+
664
+
Some transform functions can be represented by more generic transform functions. These transform functions are called derived transform functions, and the generic transform functions are called primitive transform functions. Two-dimensional primitives and their derived transform functions are:
665
+
666
+
<dl>
667
+
<dt id="translate-primitive">''translate()''
668
+
<dd>for <<translateX()>>, <<translateY()>> and <<translate()>>.
669
+
670
+
<dt id="rotate-three-primitive">''rotate()'' with three arguments
671
+
<dd>for <<rotate()>> with one or three arguments if <a href="#svg-transform-functions">rotate with three arguments</a> is supported.
672
+
673
+
<dt id="scale-primitive">''scale()''
674
+
<dd>for <<scaleX()>>, <<scaleY()>> and <<scale()>>.
675
+
676
+
</dl>
677
+
678
+
671
679
The Transform Function Lists {#transform-function-lists}
Some transform functions can be represented by more generic transform functions. These transform functions are called derived transform functions, the generic transform functions primitives. Primitives for two-dimensional and three-dimensional transform functions are listed below.
759
-
760
-
Two-dimensional primitives with derived transform functions are:
761
-
762
-
<dl>
763
-
<dt id="translate-primitive">''translate()''
764
-
<dd>for <<translateX()>>, <<translateY()>> and <<translate()>>.
765
-
766
-
<dt id="rotate-three-primitive">''rotate()'' with three arguments
767
-
<dd>for <<rotate()>> with one or three arguments if <a href="#svg-transform-functions">rotate with three arguments</a> is supported.
768
-
769
-
<dt id="scale-primitive">''scale()''
770
-
<dd>for <<scaleX()>>, <<scaleY()>> and <<scale()>>.
771
-
772
-
</dl>
773
-
774
-
Issue(w3c/csswg-drafts#2186): Move the following lines to CSS-Transforms-2.
775
-
776
-
Three-dimensional primitives with derived transform functions are:
777
-
778
-
<dl>
779
-
<dt id="translate3d-primitive">''translate3d()''
780
-
<dd>for <<translateX()>>, <<translateY()>>, ''translateZ()'' and <<translate()>>.
781
-
782
-
<dt id="scale3d-primitive">''scale3d()''
783
-
<dd>for <<scaleX()>>, <<scaleY()>>, ''scaleZ()'' and <<scale()>>.
784
-
785
-
<dt id="rotate3d-primitive">''rotate3d()''
786
-
<dd>for <<rotate()>>, ''rotateX()'', ''rotateY()'' and ''rotateZ()''.
For derived transform functions that have a two-dimensional primitive and a three-dimensional primitive, the context decides about the used primitive. See <a href="#interpolation-of-transform-functions">Interpolation of primitives and derived transform functions</a>.
791
-
792
763
793
764
Interpolation of primitives and derived transform functions {#interpolation-of-transform-functions}
Copy file name to clipboardExpand all lines: css-transforms-2/Overview.bs
+20Lines changed: 20 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -851,6 +851,26 @@ In the following <dfn export>3d transform functions</dfn>, a <<zero>> behaves th
851
851
:: specifies a <a href="#PerspectiveDefined">perspective projection matrix</a>. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.
852
852
853
853
854
+
Transform function primitives and derivatives {#transform-primitives}
855
+
----------------------------
856
+
857
+
Some transform functions can be represented by more generic transform functions. These transform functions are called derived transform functions, and the generic transform functions are called primitive transform functions. Three-dimensional primitives and their derived transform functions are:
858
+
859
+
<dl>
860
+
<dt id="translate3d-primitive">''translate3d()''
861
+
<dd>for <<translateX()>>, <<translateY()>>, ''translateZ()'' and <<translate()>>.
862
+
863
+
<dt id="scale3d-primitive">''scale3d()''
864
+
<dd>for <<scaleX()>>, <<scaleY()>>, ''scaleZ()'' and <<scale()>>.
865
+
866
+
<dt id="rotate3d-primitive">''rotate3d()''
867
+
<dd>for <<rotate()>>, ''rotateX()'', ''rotateY()'' and ''rotateZ()''.
For derived transform functions that have a two-dimensional primitive and a three-dimensional primitive, the context decides about the used primitive. See <a href="#interpolation-of-transform-functions">Interpolation of primitives and derived transform functions</a>.
872
+
873
+
854
874
Interpolation of 3D matrices {#interpolation-of-3d-matrices}
0 commit comments