8000 2012-02-13 dschulze@adobe.com · w3c/csswg-drafts@a6f084f · GitHub
Skip to content

Commit a6f084f

Browse files
dirkschulzedirkschulze
committed
2012-02-13 dschulze@adobe.com
 Corrected mistake in the rotate3d matrix. Changed wording in introduction to match SVG and HTML. Use capital letters on main headlines for nouns. Fixed typos.
1 parent 47b7828 commit a6f084f

5 files changed

Lines changed: 36 additions & 32 deletions

File tree

‎css3-transforms/ChangeLog‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
2012-02-13 dschulze@adobe.com
2+
Corrected mistake in the rotate3d matrix.
3+
Changed wording in introduction to match SVG and HTML.
4+
Use capital letters on main headlines for nouns.
5+
Fixed typos.
6+
17
2012-02-12 dschulze@adobe.com
28
Merged CSSMatrix from current spec with CSS 3D Transforms.
39
Added function 'isAffineTransform' that returns 'true' if the matrix doesn't have any 3D components.

‎css3-transforms/Overview.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@
3636

3737
<h1>CSS Transforms</h1>
3838

39-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 February
39+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 February
4040
2012</h2>
4141

4242
<dl>
4343
<dt>This version:
4444

4545
<dd> <a
46-
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120213/">http://dev.w3.org/csswg/css3-transforms/</a>
47-
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120213-->
46+
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120214/">http://dev.w3.org/csswg/css3-transforms/</a>
47+
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120214-->
4848

4949
<dt>Latest version:
5050

@@ -213,10 +213,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
213213
Values and Lists </a>
214214

215215
<li><a href="#animation"><span class=secno>14. </span> Transitions and
216-
animations between transform values </a>
216+
Animations between Transform Values </a>
217217

218218
<li><a href="#matrix-decomposition"><span class=secno>15. </span> Matrix
219-
decomposition for animation </a>
219+
Decomposition for Animation </a>
< 77F4 code>220220
<ul class=toc>
221221
<li><a href="#unmatrix"><span class=secno>15.1. </span>Unmatrix</a>
222222

@@ -228,7 +228,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
228228
</ul>
229229

230230
<li><a href="#mathematical-description"><span class=secno>16. </span>
231-
Mathematical description of transformation functions </a>
231+
Mathematical Description of Transformation Functions </a>
232232

233233
<li><a href="#dom-interfaces"><span class=secno>17. </span> DOM Interfaces
234234
</a>
@@ -259,10 +259,10 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
259259
<p><em>This section is not normative.</em>
260260

261261
<p> The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual
262-
formatting model</a> describes a coordinate system within which each
263-
element is positioned. Positions and sizes in this coordinate space can be
264-
thought of as being expressed in pixels, starting in the upper left corner
265-
of the parent with positive values proceeding to the right and down.
262+
formatting model</a> describes a coordinate system within each element is
263+
positioned. Positions and sizes in this coordinate space can be thought of
264+
as being expressed in pixels, starting in the origin of point with
265+
positive values proceeding to the right and down.
266266

267267
<p> This coordinate space can be modified with the <a href="#effects"><code
268268
class=property>'transform'</code></a> property. Using transform, elements
@@ -822,9 +822,9 @@ <h2 id=transform-property><span class=secno>6. </span> The <a
822822
class=property>'transform'</code></a> property. This property contains a
823823
list of <a href="#transform-functions">transform functions</a>. The final
824824
transformation value for a coordinate system is obtained by converting
825-
each function in the list to its corresponding matrix (either defined in
826-
this specification or by reference to the SVG specification), then
827-
multiplying the matrices.
825+
each function in the list to its corresponding matrix like defined in <a
826+
href="#mathematical-description">Mathematical Description of
827+
Transformation Functions</a>, then multiplying the matrices.
828828

829829
<table class=propdef>
830830
<tbody>
@@ -1527,8 +1527,8 @@ <h2 id=transform-values><span class=secno>13. </span> Transform Values and
15271527
is the matrix multiplication of the list of transforms.</p>
15281528
<!-- ======================================================================================================= -->
15291529

1530-
<h2 id=animation><span class=secno>14. </span> Transitions and animations
1531-
between transform values</h2>
1530+
<h2 id=animation><span class=secno>14. </span> Transitions and Animations
1531+
between Transform Values</h2>
15321532

15331533
<p> When animating or transitioning the value of a transform property the
15341534
rules described below are applied. The &lsquo;<code
@@ -1616,7 +1616,7 @@ <h2 id=animation><span class=secno>14. </span> Transitions and animations
16161616
transformed element is not rendered.
16171617

16181618
<h2 id=matrix-decomposition><span class=secno>15. </span> Matrix
1619-
decomposition for animation</h2>
1619+
Decomposition for Animation</h2>
16201620

16211621
<p> When interpolating between 2 matrices, each is decomposed into the
16221622
corresponding translation, rotation, scale, skew and perspective values.
@@ -1793,7 +1793,7 @@ <h3 id=recomposing-the-matrix><span class=secno>15.3. </span>Recomposing
17931793
scale3d(scale[0], scale[1], scale[2])</pre>
17941794

17951795
<h2 id=mathematical-description><span class=secno>16. </span> Mathematical
1796-
description of transformation functions</h2>
1796+
Description of Transformation Functions</h2>
17971797

17981798
<p> Mathematically, all transformation functions can be represented as 4x4
17991799
transformation matrices of the following form:
@@ -1850,12 +1850,12 @@ <h2 id=mathematical-description><span class=secno>16. </span> Mathematical
18501850
<p> A 3D rotation with the vector [x,y,z] and the parameter
18511851
<em>alpha</em> is equivalent to the matrix:</p>
18521852
<img height=106 src=rotate3dmatrix.png
1853-
title="\begin{bmatrix} 1 - 2 \cdot (x^2 + z^2) \cdot sq & 2 \cdot (x \cdot y \cdot sq - z \cdot sc) & 2 \cdot (x \cdot z \cdot sq + y \cdot sc) & 0 \\ 2 \cdot (x \cdot y \cdot sq + z \cdot sc) & 1 - 2 \cdot (z^2 + x^2) \cdot sq & 2 \cdot (y \cdot z \cdot sq - x \cdot sc) & 0 \\ 2 \cdot (x \cdot z \cdot sq - y \cdot sc) & 2 \cdot (y \cdot z \cdot sq + x \cdot sc) & 1 - 2 \cdot (x^2 + y^2) \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
1853+
title="\begin{bmatrix} 1 - 2 \cdot (y^2 + z^2) \cdot sq & 2 \cdot (x \cdot y \cdot sq - z \cdot sc) & 2 \cdot (x \cdot z \cdot sq + y \cdot sc) & 0 \\ 2 \cdot (x \cdot y \cdot sq + z \cdot sc) & 1 - 2 \cdot (x^2 + z^2) \cdot sq & 2 \cdot (y \cdot z \cdot sq - x \cdot sc) & 0 \\ 2 \cdot (x \cdot z \cdot sq - y \cdot sc) & 2 \cdot (y \cdot z \cdot sq + x \cdot sc) & 1 - 2 \cdot (x^2 + y^2) \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
18541854
width=647>
18551855
<p> where:</p>
18561856
<img height=50 src=rotate3dvariables.png
1857-
title="\newline sc = \sin (\alpha) \cdot \cos (\alpha) \newline sq = \sin^2 (\alpha)"
1858-
width=177>
1857+
title="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)"
1858+
width=221>
18591859

18601860
<li id=RotateXDefined>
18611861
<p> A 3D rotation about the X axis with the parameter <em>alpha</em> is

‎css3-transforms/Transforms.src.html‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,10 @@ <h2>Introduction</h2>
9090
<p><em>This section is not normative.</em></p>
9191
<p>
9292
The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual
93-
formatting model</a> describes a coordinate system within which each
93+
formatting model</a> describes a coordinate system within each
9494
element is positioned. Positions and sizes in this coordinate space can
95-
be thought of as being expressed in pixels, starting in the upper left
96-
corner of the parent with positive values proceeding to the right and
97-
down.
95+
be thought of as being expressed in pixels, starting in the origin of point
96+
with positive values proceeding to the right and down.
9897
</p>
9998
<p>
10099
This coordinate space can be modified with the <code
@@ -577,9 +576,8 @@ <h2 id="transform-property">
577576
renders in through the <code class="property">'transform'</code> property. This property contains a
578577
list of <a href="#transform-functions">transform functions</a>. The
579578
final transformation value for a coordinate system is obtained by converting
580-
each function in the list to its corresponding matrix (either defined in
581-
this specification or by reference to the SVG specification), then multiplying
582-
the matrices.
579+
each function in the list to its corresponding matrix like defined in <a href="#mathematical-description">Mathematical
580+
Description of Transformation Functions</a>, then multiplying the matrices.
583581
</p>
584582
<table class="propdef">
585583
<tbody>
@@ -1384,7 +1382,7 @@ <h2 id="transform-values">
13841382
<!-- ======================================================================================================= -->
13851383

13861384
<h2 id="animation">
1387-
Transitions and animations between transform values
1385+
Transitions and Animations between Transform Values
13881386
</h2>
13891387

13901388
<p>
@@ -1493,7 +1491,7 @@ <h2 id="animation">
14931491
</p>
14941492

14951493
<h2 id="matrix-decomposition">
1496-
Matrix decomposition for animation
1494+
Matrix Decomposition for Animation
14971495
</h2>
14981496

14991497
<p>
@@ -1666,7 +1664,7 @@ <h3>Recomposing the matrix</h3>
16661664
scale3d(scale[0], scale[1], scale[2])</pre>
16671665

16681666
<h2 id="mathematical-description">
1669-
Mathematical description of transformation functions
1667+
Mathematical Description of Transformation Functions
16701668
</h2>
16711669
<p>
16721670
Mathematically, all transformation functions can be represented as 4x4 transformation matrices of the following form:
@@ -1717,11 +1715,11 @@ <h2 id="mathematical-description">
17171715
<p>
17181716
A 3D rotation with the vector [x,y,z] and the parameter <em>alpha</em> is equivalent to the matrix:
17191717
</p>
1720-
<img src="rotate3dmatrix.png" title="\begin{bmatrix} 1 - 2 \cdot (x^2 + z^2) \cdot sq & 2 \cdot (x \cdot y \cdot sq - z \cdot sc) & 2 \cdot (x \cdot z \cdot sq + y \cdot sc) & 0 \\ 2 \cdot (x \cdot y \cdot sq + z \cdot sc) & 1 - 2 \cdot (z^2 + x^2) \cdot sq & 2 \cdot (y \cdot z \cdot sq - x \cdot sc) & 0 \\ 2 \cdot (x \cdot z \cdot sq - y \cdot sc) & 2 \cdot (y \cdot z \cdot sq + x \cdot sc) & 1 - 2 \cdot (x^2 + y^2) \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="647" height="106">
1718+
<img src="rotate3dmatrix.png" title="\begin{bmatrix} 1 - 2 \cdot (y^2 + z^2) \cdot sq & 2 \cdot (x \cdot y \cdot sq - z \cdot sc) & 2 \cdot (x \cdot z \cdot sq + y \cdot sc) & 0 \\ 2 \cdot (x \cdot y \cdot sq + z \cdot sc) & 1 - 2 \cdot (x^2 + z^2) \cdot sq & 2 \cdot (y \cdot z \cdot sq - x \cdot sc) & 0 \\ 2 \cdot (x \cdot z \cdot sq - y \cdot sc) & 2 \cdot (y \cdot z \cdot sq + x \cdot sc) & 1 - 2 \cdot (x^2 + y^2) \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="647" height="106">
17211719
<p>
17221720
where:
17231721
</p>
1724-
<img src="rotate3dvariables.png" title="\newline sc = \sin (\alpha) \cdot \cos (\alpha) \newline sq = \sin^2 (\alpha)" width="177" height="50">
1722+
<img src="rotate3dvariables.png" title="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)" width="221" height="50">
17251723
</li>
17261724
<li id="RotateXDefined">
17271725
<p>

‎css3-transforms/rotate3dmatrix.png‎

33 Bytes
Loading

‎css3-transforms/rotate3dvariables.png‎

269 Bytes
Loading

0 commit comments

Comments
 (0)