Skip to content

Commit 0a185fa

Browse files
dirkschulzesvgeesus
dirkschulze
authored and
svgeesus
committed
Incorporated feedback and added more references to CSS Transforms.
1 parent 0c0aace commit 0a185fa

2 files changed

Lines changed: 59 additions & 23 deletions

File tree

‎matrix/ChangeLog‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
2013-06-29 Dirk Schulze <dschulze@adobe.com>
2+
Incorporated feedback and added more references to CSS Transforms.
3+
Translation, Rotation, Scale and Skew matrices described and referenced by CSS Transforms.
4+
Definition for rotateFromVector function modified to be more precise.
5+
16
2013-03-25 Dirk Schulze <dschulze@adobe.com>
27
Removed decomposing code. Not necessary anymore with the normative reference to CSS Transforms.
38

@@ -21,7 +26,7 @@
2126
New naming for origin arguments.
2227

2328
2013-03-07 Dirk Schulze <dschulze@adobe.com>
24-
Fixed typos in defitnions.
29+
Fixed typos in definitions.
2530

2631
2013-03-07 Dirk Schulze <dschulze@adobe.com>
2732
'rotate' and 'rotateBy' should be pure 2D operations.

‎matrix/index.html‎

Lines changed: 53 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@
4646
</p>
4747

4848
<p>
49-
The transformation matrix interface replaces the SVGMatrix interface from SVG [[SVG11]]. It is a common interface used to describe 2D and 3D transformations on a graphical context for SVG, Context2D [[CANVAS-2D]], CSS3 Transforms [[CSS3-TRANSFORMS]]<!-- and WebGL [[WEBGL]] -->.
49+
The transformation matrix interface replaces the SVGMatrix interface from SVG [[SVG11]]. It is a common interface used to describe 2D and 3D transformations on a graphical context for SVG, Canvas 2D Context [[CANVAS-2D]] and CSS Transforms [[CSS3-TRANSFORMS]]<!-- and WebGL [[WEBGL]] -->.
5050
</p>
5151
</section>
5252

5353
<section>
54-
<h2>Definitions</h2>
54+
<h2>Terminology</h2>
5555
<dl>
5656
<dt><dfn>post-multiply</dfn></dt>
5757
<dd>Term A post-multiplied by term B is equal to A &middot; B.</dd>
@@ -134,6 +134,13 @@ <h2>The <a>CSSMatrix</a> interface</h2>
134134
The <a>CSSMatrix</a> interface represents a mathematical matrix with the purpose of describing transformations a graphical contexts. The following sections describe the details of the interface. For the full interface see <a href="#webidl-ref">Interface summary</a>.
135135
</p>
136136

137+
<div class="figure">
138+
<img src="images/4x4matrix.png" alt="4x4 matrix with items m11 to m44">
139+
<p class="capture">A 4x4 matrix representing a <a>CSSMatrix</a> with items m11 to m44.</p>
140+
</div>
141+
142+
<p class="issue">It needs to be decided if CSSMatrix stored single or double precision floating point numbers.</p>
143+
137144
<section>
138145
<h3>The constructors</h3>
139146

@@ -383,7 +390,8 @@ <h3>Immutable transformation methods</h3>
383390
<dt>optional unrestricted double tz = 0</dt>
384391
<dd>Optional translation value along the z-axis.</dd>
385392
</dl>
386-
Post-multiplies a translation transformation on the current matrix and returns the resulting matrix. The current matrix is not modified.
393+
<p>Post-multiplies a translation transformation on the current matrix and returns the resulting matrix. The current matrix is not modified.</p>
394+
<p>The 3D translation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Translate3dDefined">described</a> in CSS Transforms [[!CSS3-TRANSFORMS]].</p>
387395
</dd>
388396
<dt>CSSMatrix scale()</dt>
389397
<dd>
@@ -395,7 +403,8 @@ <h3>Immutable transformation methods</h3>
395403
<dt>optional unrestricted double originY = 0</dt>
396404
<dd>Transformation origin on the y-axis.</dd>
397405
</dl>
398-
Post-multiplies a uniform 2D scale transformation (<code>m11 = m22 = scale</code>) on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.
406+
<p>Post-multiplies a uniform 2D scale transformation (<code>m11 = m22 = scale</code>) on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.</p>
407+
<p>The 2D scale matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#ScaleDefined">described</a> in CSS Transforms with <code>sx = sy = scale</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
399408
</dd>
400409
<dt>CSSMatrix scale3d()</dt>
401410
<dd>
@@ -409,7 +418,8 @@ <h3>Immutable transformation methods</h3>
409418
<dt>optional unrestricted double originZ = 0</dt>
410419
<dd>Transformation origin on the z-axis.</dd>
411420
</dl>
412-
Post-multiplies a uniform scale transformation (<code>m11 = m22 = m33 = scale</code>) on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.
421+
<p>Post-multiplies a uniform scale transformation (<code>m11 = m22 = m33 = scale</code>) on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.</p>
422+
<p>The 3D scale matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Scale3dDefined">described</a> in CSS Transforms with <code>sx = sy = sz = scale</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
413423
</dd>
414424
<dt>CSSMatrix scaleNonUniform()</dt>
415425
<dd>
@@ -427,7 +437,8 @@ <h3>Immutable transformation methods</h3>
427437
<dt>optional unrestricted double originZ = 0</dt>
428438
<dd>Transformation origin on the z-axis.</dd>
429439
</dl>
430-
Post-multiplies a non-uniform scale transformation on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.
440+
<p>Post-multiplies a non-uniform scale transformation on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.</p>
441+
<p>The 3D scale matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Scale3dDefined">described</a> in CSS Transforms with <code>sx = scaleX</code>, <code>sy = scaleY</code> and <code>sz = scaleZ</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
431442
</dd>
432443
<dt>CSSMatrix rotate()</dt>
433444
<dd>
@@ -439,17 +450,19 @@ <h3>Immutable transformation methods</h3>
439450
<dt>optional unrestricted double originY = 0</dt>
440451
<dd>Transformation origin on the y-axis.</dd>
441452
</dl>
442-
Post-multiplies a rotation transformation on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.
453+
<p>Post-multiplies a rotation transformation on the current matrix with the given origin and returns the resulting matrix. The current matrix is not modified.</p>
454+
<p>The 2D rotation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#RotateDefined">described</a> in CSS Transforms with <code>alpha = angle</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
443455
</dd>
444456
<dt>CSSMatrix rotateFromVector(unrestricted double x, unrestricted double y)</dt>
445457
<dd>
446458
<dl class='parameters'>
447459
<dt>unrestricted double x</dt>
448-
<dd>The x coordinate of the vector (x,y). Must not be zero.</dd>
460+
<dd>The x coordinate of the vector (x,y)<sup>T</sup>.</dd>
449461
<dt>unrestricted double y</dt>
450-
<dd>The y coordinate of the vector (x,y). Must not be zero.</dd>
462+
<dd>The y coordinate of the vector (x,y)<sup>T</sup>.</dd>
451463
</dl>
452-
Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used. The current matrix is not modified.
464+
<p>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation angle is determined by the angle between the vector (1,0)<sup>T</sup> and (x,y)<sup>T</sup> in the clockwise direction. If <code>x</code> and <code>y</code> should both be zero, the angle is specified as zero. The current matrix is not modified.</p>
465+
<p>The 2D rotation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#RotateDefined">described</a> in CSS Transforms where <code>alpha</code> is the angle between the vector (1,0)<sup>T</sup> and (x,y)<sup>T</sup> in degrees [[!CSS3-TRANSFORMS]].</p>
453466
</dd>
454467
<dt>CSSMatrix rotateAxisAngle(unrestricted double x, unrestricted double y, unrestricted double z, unrestricted double angle)</dt>
455468
<dd>
@@ -462,24 +475,27 @@ <h3>Immutable transformation methods</h3>
462475
<dd>The z coordinate of the vector (x,y,z).</dd>
463476
<dt>unrestricted double angle</dt>
464477
<dd>Rotation angle in degrees.</dd>
465-
Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation of the transform is applied around the given vector. The current matrix is not modified.
466478
</dl>
479+
<p>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation of the transform is applied around the given vector. The current matrix is not modified.</p>
480+
<p>The 3D rotation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Rotate3dDefined">described</a> in CSS Transforms with <code>alpha = angle</code> [[!CSS3-TRANSFORMS]].</p>
467481
</dd>
468482
<dt>CSSMatrix skewX()</dt>
469483
<dd>
470484
<dl class='parameters'>
471485
<dt>unrestricted double sx</dt>
472486
<dd>Skew angle along the x-axis in degrees.</dd>
473487
</dl>
474-
Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix. The current matrix is not modified.
488+
<p>Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix. The current matrix is not modified.</p>
489+
<p>The 2D skewX matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#SkewXDefined">described</a> in CSS Transforms with <code>alpha = sx</code> [[!CSS3-TRANSFORMS]].</p>
475490
</dd>
476491
<dt>CSSMatrix skewY()</dt>
477492
<dd>
478493
<dl class='parameters'>
479494
<dt>unrestricted double sy</dt>
480495
<dd>Skew angle along the y-axis in degrees.</dd>
481496
</dl>
482-
Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix.
497+
<p>Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix.</p>
498+
<p>The 2D skewY matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#SkewYDefined">described</a> in CSS Transforms with <code>beta = sy</code> [[!CSS3-TRANSFORMS]].</p>
483499
</dd>
484500
<dt>CSSMatrix multiply()</dt>
485501
<dd>
@@ -540,7 +556,8 @@ <h3>Mutable transformation methods</h3>
540556
<dt>optional unrestricted double tz = 0</dt>
541557
<dd>Optional translation value along the z-axis.</dd>
542558
</dl>
543-
Post-multiplies a translation transformation on the current matrix.
559+
<p>Post-multiplies a translation transformation on the current matrix.</p>
560+
<p>The 3D translation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Translate3dDefined">described</a> in CSS Transforms [[!CSS3-TRANSFORMS]].</p>
544561
</dd>
545562
<dt>void scaleBy()</dt>
546563
<dd>
@@ -552,7 +569,8 @@ <h3>Mutable transformation methods</h3>
552569
<dt>optional unrestricted double originY = 0</dt>
553570
<dd>Transformation origin on the y-axis.</dd>
554571
</dl>
555-
Post-multiplies a uniform 2D scale transformation (<code>m11 = m22 = scale</code>) on the current matrix with the given origin.
572+
<p>Post-multiplies a uniform 2D scale transformation (<code>m11 = m22 = scale</code>) on the current matrix with the given origin.</p>
573+
<p>The 2D scale matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#ScaleDefined">described</a> in CSS Transforms with <code>sx = sy = scale</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
556574
</dd>
557575
<dt>void scale3dBy()</dt>
558576
<dd>
@@ -566,7 +584,8 @@ <h3>Mutable transformation methods</h3>
566584
<dt>optional unrestricted double originZ = 0</dt>
567585
<dd>Transformation origin on the z-axis.</dd>
568586
</dl>
569-
Post-multiplies a uniform 2D scale transformation (<code>m11 = m22 = m33 = scale</code>) on the current matrix with the given origin.
587+
<p>Post-multiplies a uniform 2D scale transformation (<code>m11 = m22 = m33 = scale</code>) on the current matrix with the given origin.</p>
588+
<p>The 3D scale matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Scale3dDefined">described</a> in CSS Transforms with <code>sx = sy = sz = scale</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
570589
</dd>
571590
<dt>void scaleNonUniformBy()</dt>
572591
<dd>
@@ -584,7 +603,8 @@ <h3>Mutable transformation methods</h3>
584603
<dt>optional unrestricted double originZ = 0</dt>
585604
<dd>Transformation origin on the z-axis.</dd>
586605
</dl>
587-
Post-multiplies a non-uniform scale transformation on the current matrix with the given origin.
606+
<p>Post-multiplies a non-uniform scale transformation on the current matrix with the given origin.</p>
607+
<p>The 3D scale matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Scale3dDefined">described</a> in CSS Transforms with <code>sx = scaleX</code>, <code>sy = scaleY</code> and <code>sz = scaleZ</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
588608
</dd>
589609
<dt>void rotateBy()</dt>
590610
<dd>
@@ -596,7 +616,8 @@ <h3>Mutable transformation methods</h3>
596616
<dt>optional unrestricted double originY = 0</dt>
597617
<dd>Transformation origin on the y-axis.</dd>
598618
</dl>
599-
Post-multiplies a rotation transformation on the current matrix with the given origin.
619+
<p>Post-multiplies a rotation transformation on the current matrix with the given origin.</p>
620+
<p>The 2D rotation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#RotateDefined">described</a> in CSS Transforms with <code>alpha = angle</code>. This does not include the origin translation. [[!CSS3-TRANSFORMS]].</p>
600621
</dd>
601622
<dt>void rotateFromVectorBy(unrestricted double x, unrestricted double y)</dt>
602623
<dd>
@@ -606,7 +627,8 @@ <h3>Mutable transformation methods</h3>
606627
<dt>unrestricted double y</dt>
607628
<dd>The y coordinate of the vector (x,y). Must not be zero.</dd>
608629
</dl>
609-
Post-multiplies a rotation transformation on the current matrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.
630+
<p>Post-multiplies a rotation transformation on the current matrix. The rotation angle is determined by the angle between the vector (1,0)<sup>T</sup> and (x,y)<sup>T</sup> in the clockwise direction. If <code>x</code> and <code>y</code> should both be zero, the angle is specified as zero.</p>
631+
<p>The 2D rotation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#RotateDefined">described</a> in CSS Transforms where <code>alpha</code> is the angle between the vector (1,0)<sup>T</sup> and (x,y)<sup>T</sup> in degrees [[!CSS3-TRANSFORMS]].</p>
610632
</dd>
611633
<dt>void rotateAxisAngleBy(unrestricted double x, unrestricted double y, unrestricted double z, unrestricted double angle)</dt>
612634
<dd>
@@ -619,24 +641,27 @@ <h3>Mutable transformation methods</h3>
619641
<dd>The z coordinate of the vector (x,y,z).</dd>
620642
<dt>unrestricted double angle</dt>
621643
<dd>Rotation angle in degrees.</dd>
622-
Post-multiplies a rotation transformation on the current matrix. The rotation of the transform is applied around the given vector.
623644
</dl>
645+
<p>Post-multiplies a rotation transformation on the current matrix. The rotation of the transform is applied around the given vector.</p>
646+
<p>The 3D rotation matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#Rotate3dDefined">described</a> in CSS Transforms with <code>alpha = angle</code> [[!CSS3-TRANSFORMS]].</p>
624647
</dd>
625648
<dt>void skewXBy()</dt>
626649
<dd>
627650
<dl class='parameters'>
628651
<dt>unrestricted double sx</dt>
629652
<dd>Skew angle along the x-axis in degrees.</dd>
630653
</dl>
631-
Post-multiplies a skewX transformation on the current matrix.
654+
<p>Post-multiplies a skewX transformation on the current matrix.</p>
655+
<p>The 2D skewX matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#SkewXDefined">described</a> in CSS Transforms with <code>alpha = sx</code> [[!CSS3-TRANSFORMS]].</p>
632656
</dd>
633657
<dt>void skewYBy()</dt>
634658
<dd>
635659
<dl class='parameters'>
636660
<dt>unrestricted double sy</dt>
637661
<dd>Skew angle along the y-axis in degrees.</dd>
638662
</dl>
639-
Post-multiplies a skewX transformation on the current matrix.
663+
<p>Post-multiplies a skewX transformation on the current matrix.</p>
664+
<p>The 2D skewY matrix is <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#SkewYDefined">described</a> in CSS Transforms with <code>beta = sy</code> [[!CSS3-TRANSFORMS]].</p>
640665
</dd>
641666
<dt>void invert()</dt>
642667
<dd>
@@ -706,6 +731,12 @@ <h3>Helper methods</h3>
706731
</dl>
707732
</section>
708733
</section>
734+
735+
<section>
736+
<h2>Transformation to a 3x2 matrix</h2>
737+
<p>Host languages might require an internal 3x2 matrix abstraction of a <a>CSSMatrix</a>. This transformation from a 4x4 matrix to a 3x2 by loosing information is described in section <a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#MatrixDefined">Mathematical Description of Transform Functions</a> of CSS Transforms [[!CSS3-TRANSFORMS]].</p>
738+
</section>
739+
709740
<section class='appendix' id="webidl-ref">
710741
<h2>Interface summary</h2>
711742
</section>

0 commit comments

Comments
 (0)