Skip to content

Commit 4aa18f6

Browse files
aygayg
committed
Define rotate[XYZ] in terms of rotate3d
Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=15612.
1 parent 251cce2 commit 4aa18f6

3 files changed

Lines changed: 31 additions & 64 deletions

File tree

‎css3-transforms/ChangeLog‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
2012-03-12 ayg@aryeh.name
2+
Define rotate[XYZ] in terms of rotate3d
3+
Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=15612.
4+
15
2012-03-12 ayg@aryeh.name
26
Nonpositive lengths for 'perspective' should be invalid
37
Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=16183.

‎css3-transforms/Overview.html‎

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2040,32 +2040,27 @@ <h3 id=three-d-transform-functions><span class=secno>13.2. </span>3D
20402040

20412041
<dt> <code class=css>rotate3d(&lt;number&gt;, &lt;number&gt;,
20422042
&lt;number&gt;, &lt;angle&gt;)</code>
2043-
</dl>
2044-
2045-
<div class=todo>Clarify "clockwise". Describe in terms of right-hand rule?</div>
20462043

2047-
<dl>
2048-
<dd> specifies a clockwise <a href="#Rotate3dDefined">3D rotation</a> by
2049-
the angle specified in last parameter about the [x,y,z] direction vector
2050-
described by the first 3 parameters. If the direction vector is not of
2051-
unit length, it will be normalized. A direction vector that cannot be
2044+
<dd> specifies a <a href="#Rotate3dDefined">3D rotation</a> by the angle
2045+
specified in last parameter about the [x,y,z] direction vector described
2046+
by the first three parameters. If the direction vector is not of unit
2047+
length, it will be normalized. A direction vector that cannot be
20522048
normalized, such as [0,0,0], will cause the rotation to not be applied.
2049+
Note: The rotation is clockwise as one looks from the end of the vector
2050+
toward the origin.
20532051

20542052
<dt> <code class=css>rotateX(&lt;angle&gt;)</code>
20552053

2056-
<dd> specifies a clockwise <a href="#RotateXDefined">3D rotation</a> by
2057-
the given angle about the X axis.
2054+
<dd> same as <code class=css>rotate3d(1, 0, 0, &lt;angle&gt;)</code>.
20582055

20592056
<dt> <code class=css>rotateY(&lt;angle&gt;)</code>
20602057

2061-
<dd> specifies a clockwise <a href="#RotateYDefined">3D rotation</a> by
2062-
the given angle about the Y axis.
2058+
<dd> same as <code class=css>rotate3d(0, 1, 0, &lt;angle&gt;)</code>.
20632059

20642060
<dt> <code class=css>rotateZ(&lt;angle&gt;)</code>
20652061

2066-
<dd> specifies a clockwise <a href="#RotateZDefined">3D rotation</a> by
2067-
the given angle about the Z axis. This is a synonym for <code
2068-
class=css>rotate(&lt;angle&gt;)</code>.
2062+
<dd> same as <code class=css>rotate3d(0, 0, 1, &lt;angle&gt;)</code>,
2063+
which is also the same as <code class=css>rotate(&lt;angle&gt;)</code>.
20692064

20702065
<dt id=perspective-function> <code
20712066
class=css>perspective(&lt;length&gt;)</code>
@@ -2412,7 +2407,8 @@ <h2 id=mathematical-description><span class=secno>17. </span> Mathematical
24122407

24132408
<li id=RotateDefined>
24142409
<p> A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a
2415-
href="#RotateZDefined">rotation around the Z axis</a>.</p>
2410+
href="#Rotate3dDefined">3D rotation</a> with vector [0,0,1] and
2411+
parameter <em>alpha</em>.</p>
24162412

24172413
<li id=SkewDefined>
24182414
<p> A 2D skew transformation with the parameters <em>alpha</em> and
@@ -2446,27 +2442,6 @@ <h2 id=mathematical-description><span class=secno>17. </span> Mathematical
24462442
alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)"
24472443
height=50 src=rotate3dvariables.png width=221>
24482444

2449-
<li id=RotateXDefined>
2450-
<p> A 3D rotation about the X axis with the parameter <em>alpha</em> is
2451-
equivalent to the matrix:</p>
2452-
<img
2453-
alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\alpha) & -\sin(\alpha) & 0 \\ 0 & \sin(\alpha) & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
2454-
height=106 src=rotateX.png width=220>
2455-
2456-
<li id=RotateYDefined>
2457-
<p> A 3D rotation about the Y axis with the parameter <em>alpha</em> is
2458-
equivalent to the matrix:</p>
2459-
<img
2460-
alt="\begin{bmatrix} \cos(\alpha) & 0 & \sin(\alpha) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\alpha) & 0 & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
2461-
height=106 src=rotateY.png width=220>
2462-
2463-
<li id=RotateZDefined>
2464-
<p> A 3D rotation about the Z axis with the parameter <em>alpha</em> is
2465-
equivalent to the matrix:</p>
2466-
<img
2467-
alt="\begin{bmatrix} \cos(\alpha) & -\sin(\alpha) & 0 & 0 \\ \sin(\alpha) & \cos(\alpha) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
2468-
height=106 src=rotateZ.png width=220>
2469-
24702445
<li id=PerspectiveDefined>
24712446
<p> A perspective projection matrix with the parameter <em>d</em> is
24722447
equivalent to the matrix:</p>

‎css3-transforms/Transforms.src.html‎

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1680,30 +1680,34 @@ <h3 id="three-d-transform-functions">3D Transformation Functions</h3>
16801680
<dt>
16811681
<code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>
16821682
</dt>
1683-
<div class="todo">Clarify "clockwise". Describe in terms of right-hand rule?</div>
16841683
<dd>
1685-
specifies a clockwise <a href="#Rotate3dDefined">3D rotation</a> by the angle specified in last
1686-
parameter about the [x,y,z] direction vector described by the first 3
1687-
parameters. If the direction vector is not of unit length, it will be
1688-
normalized. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied.
1684+
specifies a <a href="#Rotate3dDefined">3D rotation</a> by the
1685+
angle specified in last parameter about the [x,y,z] direction
1686+
vector described by the first three parameters. If the
1687+
direction vector is not of unit length, it will be
1688+
normalized. A direction vector that cannot be normalized,
1689+
such as [0,0,0], will cause the rotation to not be applied.
1690+
Note: The rotation is clockwise as one looks from the end of
1691+
the vector toward the origin.
16891692
</dd>
16901693
<dt>
16911694
<code class="css">rotateX(&lt;angle&gt;)</code>
16921695
</dt>
16931696
<dd>
1694-
specifies a clockwise <a href="#RotateXDefined">3D rotation</a> by the given angle about the X axis.
1697+
same as <code class="css">rotate3d(1, 0, 0, &lt;angle&gt;)</code>.
16951698
</dd>
16961699
<dt>
16971700
<code class="css">rotateY(&lt;angle&gt;)</code>
16981701
</dt>
16991702
<dd>
1700-
specifies a clockwise <a href="#RotateYDefined">3D rotation</a> by the given angle about the Y axis.
1703+
same as <code class="css">rotate3d(0, 1, 0, &lt;angle&gt;)</code>.
17011704
</dd>
17021705
<dt>
17031706
<code class="css">rotateZ(&lt;angle&gt;)</code>
17041707
</dt>
17051708
<dd>
1706-
specifies a clockwise <a href="#RotateZDefined">3D rotation</a> by the given angle about the Z axis. This is a synonym for <code class="css">rotate(&lt;angle&gt;)</code>.
1709+
same as <code class="css">rotate3d(0, 0, 1, &lt;angle&gt;)</code>,
1710+
which is also the same as <code class="css">rotate(&lt;angle&gt;)</code>.
17071711
</dd>
17081712
<dt id="perspective-function">
17091713
<code class="css">perspective(&lt;length&gt;)</code>
@@ -2057,7 +2061,9 @@ <h2 id="mathematical-description">
20572061
</li>
20582062
<li id="RotateDefined">
20592063
<p>
2060-
A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a href="#RotateZDefined">rotation around the Z axis</a>.
2064+
A 2D rotation with the parameter <em>alpha</em> is
2065+
equivalent to a <a href="#Rotate3dDefined">3D rotation</a>
2066+
with vector [0,0,1] and parameter <em>alpha</em>.
20612067
</p>
20622068
</li>
20632069
<li id="SkewDefined">
@@ -2088,24 +2094,6 @@ <h2 id="mathematical-description">
20882094
</p>
20892095
<img src="rotate3dvariables.png" alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)" width="221" height="50">
20902096
</li>
2091-
<li id="RotateXDefined">
2092-
<p>
2093-
A 3D rotation about the X axis with the parameter <em>alpha</em> is equivalent to the matrix:
2094-
</p>
2095-
<img src="rotateX.png" alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\alpha) & -\sin(\alpha) & 0 \\ 0 & \sin(\alpha) & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="220" height="106">
2096-
</li>
2097-
<li id="RotateYDefined">
2098-
<p>
2099-
A 3D rotation about the Y axis with the parameter <em>alpha</em> is equivalent to the matrix:
2100-
</p>
2101-
<img src="rotateY.png" alt="\begin{bmatrix} \cos(\alpha) & 0 & \sin(\alpha) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\alpha) & 0 & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="220" height="106">
2102-
</li>
2103-
<li id="RotateZDefined">
2104-
<p>
2105-
A 3D rotation about the Z axis with the parameter <em>alpha</em> is equivalent to the matrix:
2106-
</p>
2107-
<img src="rotateZ.png" alt="\begin{bmatrix} \cos(\alpha) & -\sin(\alpha) & 0 & 0 \\ \sin(\alpha) & \cos(\alpha) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="220" height="106">
2108-
</li>
21092097
<li id="PerspectiveDefined">
21102098
<p>
21112099
A perspective projection matrix with the parameter <em>d</em> is equivalent to the matrix:

0 commit comments

Comments
 (0)