Skip to content

Commit b99becf

Browse files
smfrsmfr
committed
2010-05-3 simon.fraser@apple.com
- Added myself to authors - Obfuscated email addresses slightly to reduce spam. - Cleaned up skew per public-fx ACTIONs 2-5: - Removed skew(x, y) transform function - Removed skew(x, y) from CSSMatrix API - Added skewX(x) and skewY(y) to CSSMatrix API - Removed multiplyLeft() to CSSMatrix API: see http://lists.w3.org/Archives/Public/public-fx/2010AprJun/0022.html
1 parent 326be6d commit b99becf

3 files changed

Lines changed: 186 additions & 177 deletions

File tree

‎css3-2d-transforms/ChangeLog‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
2010-05-3 simon.fraser@apple.com
2+
3+
- Added myself to authors
4+
- Obfuscated email addresses slightly to reduce spam.
5+
- Cleaned up skew per public-fx ACTIONs 2-5:
6+
- Removed skew(x, y) transform function
7+
- Removed skew(x, y) from CSSMatrix API
8+
- Added skewX(x) and skewY(y) to CSSMatrix API
9+
- Removed multiplyLeft() to CSSMatrix API: see http://lists.w3.org/Archives/Public/public-fx/2010AprJun/0022.html
10+
- Added a couple of Issue paragraphs.
11+
112
2010-03-23 simon.fraser@apple.com
213

314
- changed transform-origin definition to match background-origin.

‎css3-2d-transforms/Overview.html‎

Lines changed: 112 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@
2121

2222
<h1>CSS 2D Transforms Module Level 3</h1>
2323

24-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 March 2010</h2>
24+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 03 May 2010</h2>
2525

2626
<dl>
2727
<dt>This version:
2828

2929
<dd> <a
30-
href="http://www.w3.org/TR/2010/ED-css3-2d-transforms-20100323">http://dev.w3.org/csswg/css3-2d-transforms/</a>
31-
<!--http://www.w3.org/TR/2010/WD-css3-2d-transforms-20100323-->
30+
href="http://www.w3.org/TR/2010/ED-css3-2d-transforms-20100503">http://dev.w3.org/csswg/css3-2d-transforms/</a>
31+
<!--http://www.w3.org/TR/2010/WD-css3-2d-transforms-20100503-->
3232

3333
<dt>Latest version:
3434

@@ -43,14 +43,17 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 March 2010</h2>
4343

4444
<dt id=editors-list>Editors:
4545

46-
<dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
47-
href="http://www.apple.com/">Apple Inc</a>)
46+
<dd>Simon Fraser (<a href="http://www.apple.com/">Apple Inc</a>)
47+
&lt;simon.fraser &#64;apple.com&gt;
4848

49-
<dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
50-
href="http://www.apple.com/">Apple Inc</a>)
49+
<dd>Dean Jackson (<a href="http://www.apple.com/">Apple Inc</a>) &lt;dino
50+
&#64;apple.com&gt;
5151

52-
<dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
53-
href="http://www.apple.com/">Apple Inc</a>)
52+
<dd>David Hyatt (<a href="http://www.apple.com/">Apple Inc</a>) &lt;hyatt
53+
&#64;apple.com&gt;
54+
55+
<dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>)
56+
&lt;cmarrin &#64;apple.com&gt;
5457
</dl>
5558
<!--begin-copyright-->
5659
<p class=copyright><a
@@ -186,8 +189,8 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
186189
of the parent with positive values proceeding to the right and down.
187190

188191
<p> This coordinate space can be modified with the <span
189-
class=prop-name>&lsquo;<code class=property><a
190-
href="#effects">transform</a></code>&rsquo;</span> property. Using
192+
class=prop-name>&lsquo;<a href="#effects"><code
193+
class=property>transform</code></a>&rsquo;</span> property. Using
191194
transform, elements can be translated, rotated and scaled in two
192195
dimensional space. The coordinate space behaves as described in the <a
193196
href="http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">coordinate
@@ -196,18 +199,17 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
196199
right; the Y axis increases vertically downwards.
197200

198201
<p> Specifying a value other than &lsquo;<code
199-
class=property>none</code>&rsquo; for the <span
200-
class=prop-name>&lsquo;<code class=property><a
201-
href="#effects">transform</a></code>&rsquo;</span> property establishes a
202-
new <em>local coordinate system</em> at the element that it is applied to.
203-
Transformations are cumulative. That is, elements establish their local
204-
coordinate system within the coordinate system of their parent. In this
205-
way, a <span class=prop-name>&lsquo;<code class=property><a
206-
href="#effects">transform</a></code>&rsquo;</span> property effectively
207-
accumulates all the <span class=prop-name>&lsquo;<code class=property><a
208-
href="#effects">transform</a></code>&rsquo;</span> properties of its
209-
ancestors. The accumulation of these transforms defines a <em>current
210-
transformation matrix (CTM)</em> for the element.
202+
class=property>none</code>&rsquo; for the <span class=prop-name>&lsquo;<a
203+
href="#effects"><code class=property>transform</code></a>&rsquo;</span>
204+
property establishes a new <em>local coordinate system</em> at the element
205+
that it is applied to. Transformations are cumulative. That is, elements
206+
establish their local coordinate system within the coordinate system of
207+
their parent. In this way, a <span class=prop-name>&lsquo;<a
208+
href="#effects"><code class=property>transform</code></a>&rsquo;</span>
209+
property effectively accumulates all the <span class=prop-name>&lsquo;<a
210+
href="#effects"><code class=property>transform</code></a>&rsquo;</span>
211+
properties of its ancestors. The accumulation of these transforms defines
212+
a <em>current transformation matrix (CTM)</em> for the element.
211213

212214
<p> The transform property does not affect the flow of the content
213215
surrounding the transformed element. However, the value of the overflow
@@ -259,12 +261,12 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
259261
<!-- ======================================================================================================= -->
260262

261263
<h2 id=transform-property><span class=secno>2. </span> The <span
262-
class=prop-name>&lsquo;<code class=property><a
263-
href="#effects">transform</a></code>&rsquo;</span> Property</h2>
264+
class=prop-name>&lsquo;<a href="#effects"><code
265+
class=property>transform</code></a>&rsquo;</span> Property</h2>
264266

265267
<p> A two-dimensional transformation is applied to an element through the
266-
<span class=prop-name>&lsquo;<code class=property><a
267-
href="#effects">transform</a></code>&rsquo;</span> property. This property
268+
<span class=prop-name>&lsquo;<a href="#effects"><code
269+
class=property>transform</code></a>&rsquo;</span> property. This property
268270
contains a list of <a href="#transform-functions">transform functions</a>.
269271
The final transformation value for an element is obtained by performing a
270272
matrix concatenation of each entry in the list. The set of transform
@@ -315,19 +317,18 @@ <h2 id=transform-property><span class=secno>2. </span> The <span
315317
<!-- ======================================================================================================= -->
316318

317319
<h2 id=transform-origin-property><span class=secno>3. </span> The <span
318-
class=prop-name>&lsquo;<code class=property><a
319-
href="#transform-origin">transform-origin</a></code>&rsquo;</span>
320-
Property</h2>
321-
322-
<p> The <span class=prop-name>&lsquo;<code class=property><a
323-
href="#transform-origin">transform-origin</a></code>&rsquo;</span>
324-
property establishes the origin of transformation for an element. This
325-
property is applied by first translating the element by the negated value
326-
of the property, then applying the element's transform, then translating
327-
by the property value. This effectively moves the desired transformation
328-
origin of the element to (0,0) in the local coordinate system, then
329-
applies the element's transform, then moves the element back to its
330-
original position.
320+
class=prop-name>&lsquo;<a href="#transform-origin"><code
321+
class=property>transform-origin</code></a>&rsquo;</span> Property</h2>
322+
323+
<p> The <span class=prop-name>&lsquo;<a href="#transform-origin"><code
324+
class=property>transform-origin</code></a>&rsquo;</span> property
325+
establishes the origin of transformation for an element. This property is
326+
applied by first translating the element by the negated value of the
327+
property, then applying the element's transform, then translating by the
328+
property value. This effectively moves the desired transformation origin
329+
of the element to (0,0) in the local coordinate system, then applies the
330+
element's transform, then moves the element back to its original position.
331+
331332

332333
<p>If only one value is specified, the second value is assumed to be
333334
&lsquo;<code class=property>center</code>&rsquo;. If two values are given
@@ -467,8 +468,8 @@ <h2 id=transform-functions><span class=secno>4. </span> The Transformation
467468
<dd> specifies a <a
468469
href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
469470
rotation</a> by the angle specified in the parameter about the origin of
470-
the element, as defined by the <em><a
471-
href="#transform-origin">transform-origin</a></em> property.
471+
the element, as defined by the <a
472+
href="#transform-origin"><em>transform-origin</em></a> property.
472473

473474
<dt> <span class=prop-value>skewX(&lt;angle&gt;)</span>
474475

@@ -481,15 +482,6 @@ <h2 id=transform-functions><span class=secno>4. </span> The Transformation
481482
<dd> specifies a <a
482483
href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew
483484
transformation along the Y axis</a> by the given angle.
484-
485-
<dt> <span class=prop-value>skew(&lt;angle&gt; [, &lt;angle&gt;])</span>
486-
487-
<dd> specifies a <a
488-
href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
489-
transformation along the X and Y axes</a>. The first angle parameter
490-
specifies the skew on the X axis. The second angle parameter specifies
491-
the skew on the Y axis. If the second parameter is not given then a value
492-
of 0 is used for the Y angle (ie. no skew on the Y axis).
493485
</dl>
494486

495487
<h2 id=transform-values><span class=secno>5. </span> Transform Values and
@@ -604,8 +596,7 @@ <h2 id=animation><span class=secno>6. </span> Transitions and animations
604596

605597
<p> The identity functions are translate(0), translateX(0),
606598
translateY(0), scale(1), scaleX(1), scaleY(1), rotate(0), rotateX(0),
607-
rotateY(0), skewX(0), skewY(0), skew(0, 0) and matrix(1, 0, 0, 1, 0,
608-
0).</p>
599+
rotateY(0), skewX(0), skewY(0) and matrix(1, 0, 0, 1, 0, 0).</p>
609600
</ul>
610601

611602
<li> If both the &lsquo;<code class=property>from</code>&rsquo; and
@@ -647,6 +638,15 @@ <h2 id=matrix-decomposition><span class=secno>7. </span> Matrix
647638
<h3 id=d-matrix-to-4x4-matrix-conversion><span class=secno>7.1. </span>2D
648639
matrix to 4x4 matrix conversion</h3>
649640

641+
<div class=issue>
642+
<p> The pseudocode here is written with column-major matrices, as would be
643+
used in C/C++, but the SVG spec illustrates matrixes using row-major
644+
notation. Change this pseudocode to avoid confusion?</p>
645+
646+
<p> It's also unfortunate that we have to include math for 4x4 matrices
647+
into the 2D transforms spec. Find a way to avoid that?</p>
648+
</div>
649+
650650
<pre>
651651
Input: matrix2d ; a 3x2 transformation matrix
652652
; rotation matrix in m11,m12,m21,m22
@@ -828,8 +828,8 @@ <h3 id=recomposing-the-matrix><span class=secno>7.4. </span>Recomposing the
828828

829829
<p> After interpolation the resulting values are used to position the
830830
element. One way to use these values is to recompose them into a 4x4
831-
matrix. This can be done using the Transformation Functions of the <em><a
832-
href="#effects">transform</a></em> property. The following JavaScript
831+
matrix. This can be done using the Transformation Functions of the <a
832+
href="#effects"><em>transform</em></a> property. The following JavaScript
833833
example produces a string for this purpose. The values passed in are the
834834
output of the Unmatrix function above:
835835

@@ -870,6 +870,10 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
870870
<p> The <code>CSSMatrix</code> interface represents a 4x4 homogeneous
871871
matrix.</p>
872872

873+
<div class=issue> We actually describe a 3x2 matrix here, similar to <a
874+
href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>.
875+
</div>
876+
873877
<dl>
874878
<dt> <b>IDL Definition</b>
875879

@@ -886,11 +890,11 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
886890

887891
void setMatrixValue(in DOMString string) raises(DOMException);
888892
CSSMatrix multiply(in CSSMatrix secondMatrix);
889-
CSSMatrix multiplyLeft(in CSSMatrix secondMatrix);
890893
CSSMatrix inverse() raises(DOMException);
891894
CSSMatrix translate(in float x, in float y);
892895
CSSMatrix scale(in float scaleX, in float scaleY);
893-
CSSMatrix skew(in float angleX, in float angleY);
896+
CSSMatrix skewX(in float angle);
897+
CSSMatrix skewY(in float angle);
894898
CSSMatrix rotate(in float angle);
895899
};</pre>
896900
</div>
@@ -987,41 +991,6 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
987991
<!-- multiply() -->
988992
<!-- ===================================================== -->
989993

990-
<dt> <code class=method-name><a id=DOM-CSSMatrix-multiplyLeft
991-
name=DOM-CSSMatrix-multiplyLeft>multiplyLeft</a></code>
992-
993-
<dd>
994-
<div class=method> The <code>multiplyLeft</code> method returns a new
995-
CSSMatrix which is the result of this matrix multiplied by the
996-
passed matrix, with the passed matrix to the left. This matrix is
997-
not modified.
998-
<div class=parameters> <b>Parameters</b>
999-
<div class=paramtable>
1000-
<dl>
1001-
<dt> <code class=parameter-name>secondMatrix</code> of type
1002-
<code>CSSMatrix</code>
1003-
1004-
<dd> The matrix to multiply.<br>
1005-
</dl>
1006-
</div>
1007-
</div>
1008-
<!-- parameters -->
1009-
<div class=return-value> <b>Return Value</b>
1010-
<div class=returnvalue>
1011-
<dl>
1012-
<dt> <code>CSSMatrix</code>
1013-
1014-
<dd> The result matrix.<br>
1015-
</dl>
1016-
</div>
1017-
</div>
1018-
1019-
<div> <b>No Exceptions</b></div>
1020-
</div>
1021-
</dd>
1022-
<!-- multiplyLeft() -->
1023-
<!-- ===================================================== -->
1024-
1025994
<dt> <code class=method-name><a id=DOM-CSSMatrix-inverse
1026995
name=DOM-CSSMatrix-inverse>inverse</a></code>
1027996

@@ -1061,7 +1030,7 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
10611030

10621031
<dd>
10631032
<div class=method> The <code>translate</code> method returns a new
1064-
matrix which is this matrix post multiplied by a translation matrix
1033+
matrix which is this matrix multiplied by a translation matrix
10651034
containing the passed values. This matrix is not modified.
10661035
<div class=parameters> <b>Parameters</b>
10671036
<div class=paramtable>
@@ -1101,8 +1070,8 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
11011070

11021071
<dd>
11031072
<div class=method> The <code>scale</code> method returns a new matrix
1104-
which is this matrix post multiplied by a scale matrix containing
1105-
the passed values. If the y component is undefined, the x component
1073+
which is this matrix multiplied by a scale matrix containing the
1074+
passed values. If the y component is undefined, the x component
11061075
value is used in its place. This matrix is not modified.
11071076
<div class=parameters> <b>Parameters</b>
11081077
<div class=paramtable>
@@ -1142,8 +1111,10 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
11421111

11431112
<dd>
11441113
<div class=method> The <code>rotate</code> method returns a new
1145-
matrix which is this matrix post multiplied by a rotation matrix.
1146-
The rotation value is in degrees. This matrix is not modified.
1114+
matrix which is this matrix multiplied by a <a
1115+
href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">rotation
1116+
matrix</a>. The rotation value is in degrees. This matrix is not
1117+
modified.
11471118
<div class=parameters> <b>Parameters</b>
11481119
<div class=paramtable>
11491120
<dl>
@@ -1172,22 +1143,56 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
11721143
<!-- rotate() -->
11731144
<!-- ===================================================== -->
11741145

1175-
<dt> <code class=method-name><a id=DOM-CSSMatrix-skew
1176-
name=DOM-CSSMatrix-skew>skew</a></code>
1146+
<dt> <code class=method-name><a id=DOM-CSSMatrix-skew-x
1147+
name=DOM-CSSMatrix-skew-x>skewX</a></code>
11771148

11781149
<dd>
1179-
<div class=method> The <code>skew</code> method returns a new matrix
1180-
which is this matrix post multiplied by a skew matrix. The rotation
1181-
value is in degrees. This matrix is not modified.
1150+
<div class=method> The <code>skewX</code> method returns a new matrix
1151+
which is this matrix multiplied by a matrix representing a <a
1152+
href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew along
1153+
the x-axis</a>. The rotation value is in degrees. This matrix is not
1154+
modified.
11821155
<div class=parameters> <b>Parameters</b>
11831156
<div class=paramtable>
11841157
<dl>
1185-
<dt> <code class=parameter-name>angleX</code> of type
1158+
<dt> <code class=parameter-name>angle</code> of type
11861159
<code>float</code>
11871160

11881161
<dd> The angle of skew along the X axis.<br>
1162+
</dl>
1163+
</div>
1164+
</div>
1165+
<!-- parameters -->
1166+
<div class=return-value> <b>Return Value</b>
1167+
<div class=returnvalue>
1168+
<dl>
1169+
<dt> <code>CSSMatrix</code>
1170+
1171+
<dd> The result matrix.<br>
1172+
</dl>
1173+
</div>
1174+
</div>
11891175

1190-
<dt> <code class=parameter-name>angleY</code> of type
1176+
<div> <b>No Exceptions</b></div>
1177+
</div>
1178+
<!-- ======================================================================================================= -->
1179+
</dd>
1180+
<!-- skewX() -->
1181+
<!-- ===================================================== -->
1182+
1183+
<dt> <code class=method-name><a id=DOM-CSSMatrix-skew-y
1184+
name=DOM-CSSMatrix-skew-y>skewY</a></code>
1185+
1186+
<dd>
1187+
<div class=method> The <code>skewX</code> method returns a new matrix
1188+
which is this matrix multiplied by a matrix representing a <a
1189+
href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew along
1190+
the y-axis</a>. The rotation value is in degrees. This matrix is not
1191+
modified.
1192+
<div class=parameters> <b>Parameters</b>
1193+
<div class=paramtable>
1194+
<dl>
1195+
<dt> <code class=parameter-name>angle</code> of type
11911196
<code>float</code>
11921197

11931198
<dd> The angle of skew along the Y axis.<br>
@@ -1209,7 +1214,7 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
12091214
</div>
12101215
<!-- ======================================================================================================= -->
12111216
</dd>
1212-
<!-- skew() -->
1217+
<!-- skewY() -->
12131218
</dl>
12141219
<!-- methods -->
12151220
</dl>
@@ -1219,11 +1224,11 @@ <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
12191224

12201225
<p> In addition to the interface listed above, the
12211226
<code>getComputedStyle</code> method of the <code>Window</code> object has
1222-
been updated. The <code><a href="#effects">transform</a></code> property
1227+
been updated. The <a href="#effects"><code>transform</code></a> property
12231228
of the style object returned by <code>getComputedStyle</code> contains a
12241229
DOMString of the form "matrix(a, b, c, d, e, f)" representing the 3x2
12251230
matrix that is the result of applying the individual functions listed in
1226-
the <code><a href="#effects">transform</a></code> property.
1231+
the <a href="#effects"><code>transform</code></a> property.
12271232

12281233
<h2 id=references><span class=secno>9. </span>References</h2>
12291234

0 commit comments

Comments
 (0)