- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 27 Jan 2012 07:53:16 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv443
Modified Files:
Overview.html Transforms.src.html
Added Files:
ChangeLog
Log Message:
2012-01-27 simon.fraser@apple.com
Add in 3D transform functions in their own section.
Move the basic 2D rendering examples up into the rendering model section.
Add ChangeLog file
--- NEW FILE: ChangeLog ---
2012-01-27 simon.fraser@apple.com
Add in 3D transform functions in their own section.
Move the basic 2D rendering examples up into the rendering model section.
2012-01-27 simon.fraser@apple.com
Style and formatting changes, since the default style is more readable.
Removed the Changes section, since the autogenerated content instead links to a separate ChangeLog file (this file).
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- Overview.html 27 Jan 2012 07:22:10 -0000 1.9
+++ Overview.html 27 Jan 2012 07:53:14 -0000 1.10
@@ -250,6 +250,13 @@
<li><a href="#transform-functions"><span class=secno>12. </span> The
Transformation Functions </a>
+ <ul class=toc>
+ <li><a href="#two-d-transform-functions"><span class=secno>12.1.
+ </span>2D Transformation Functions</a>
+
+ <li><a href="#three-d-transform-functions"><span class=secno>12.2.
+ </span>3D Transformation Functions</a>
+ </ul>
<li><a href="#transform-values"><span class=secno>13. </span> Transform
Values and Lists </a>
@@ -434,7 +441,49 @@
towards the viewer.
<p> Transforms apply to <a href="#TermTransformableElement">transformable
- elements</a>.</p>
+ elements</a>.
+
+ <div class=example>
+ <pre>
+div {
+ transform: translate(100px, 100px);
+}
+</pre>
+
+ <p>This transform moves the element by 100 pixels in both the X and Y
+ directions.</p>
+
+ <div class=figure> <img alt="The 100px translation in X and Y"
+ src=transform1.png></div>
+ </div>
+
+ <div class=example>
+ <pre>
+div {
+ height: 100px; width: 100px;
+ transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
+}
+</pre>
+
+ <p>Move the element by 80 pixels in both the X and Y directions, then
+ scale the element by 150%, then rotate it 45 degrees clockwise about the
+ Z axis. Note that the scale and rotate operate about the center of the
+ element, since the element has the default transform-origin of 50% 50%.</p>
+
+ <div class=figure> <img alt="The transform specified above"
+ src="compound_transform.png"></div>
+
+ <p>Note that an identical rendering can be obtained by nesting elements
+ with the equivalent transforms:
+
+ <pre>
+<div style="transform: translate(80px, 80px)">
+ <div style="transform: scale(1.5, 1.5)">
+ <div style="transform: rotate(45deg)"></div>
+ </div>
+</div>
+</pre>
+ </div>
<!-- This "in the HTML namespace" is awkward. Is there a better way? -->
<p> In the HTML namespace, the transform property does not affect the flow
@@ -509,11 +558,11 @@
</div>
</pre>
- <p>The transform is a 50° rotation about the vertical Y axis. Note how
- this makes the gray box appear narrower, but not three-dimensional.</p>
-
<div class=figure> <img alt="Div with a rotateY transform." height=190
src="examples/simple-3d-example.png" width=210></div>
+
+ <p>The transform is a 50° rotation about the vertical, Y axis. Note
+ how this makes the blue box appear narrower, but not three-dimensional.</p>
</div>
<div class=example>
@@ -532,15 +581,16 @@
</div>
</pre>
- <p>The inner element has the same transform as before, but its rendering
- is now influenced by the perspective property on its parent element.
- Perspective causes vertices that have positive Z coordinates (closer to
- the viewer) to be scaled up in X and Y, and those futher away (negative Z
- coordinates) to be scaled down.</p>
-
<div class=figure> <img
- alt="Div with a rotateY transform, and perspective on its container"
+ alt="Div with a rotateY transform, and perspective on its container"
height=190 src="examples/simple-perspective-example.png" width=210></div>
+
+ <p>The inner element has the same transform as in Example 1, but its
+ rendering is now influenced by the perspective property on its parent
+ element. Perspective causes vertices that have positive Z coordinates
+ (closer to the viewer) to be scaled up in X and Y, and those futher away
+ (negative Z coordinates) to be scaled down, giving an appearance of
+ depth.</p>
</div>
<p> An element with a three-dimensional transform that is contained in a
@@ -1219,6 +1269,9 @@
that is equal to zero is also allowed, which is treated the same as an
angle of zero degrees.
+ <h3 id=two-d-transform-functions><span class=secno>12.1. </span>2D
+ Transformation Functions</h3>
+
<dl>
<dt> <span class=prop-value>matrix(<number>, <number>,
<number>, <number>, <number>, <number>)</span>
@@ -1295,6 +1348,101 @@
transformation along the Y axis</a> by the given angle.
</dl>
+ <h3 id=three-d-transform-functions><span class=secno>12.2. </span>3D
+ Transformation Functions</h3>
+
+ <dl>
+ <dt> <span class=prop-value>matrix3d(<number>, <number>,
+ <number>, <number>, <number>, <number>,
+ <number>, <number>, <number>, <number>,
+ <number>, <number>, <number>, <number>,
+ <number>, <number>)</span>
+
+ <dd> specifies a 3D transformation as a 4x4 homogeneous matrix of 16
+ values in column-major order.
+
+ <dt> <span class=prop-value>translate3d(<translation-value>,
+ <translation-value>, <translation-value>)</span>
+
+ <dd> specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and
+ tz being the first, second and third translation-value parameters
+ respectively. <Percentage> values are not allowed in the tz
+ translation-value, and if present will cause the propery value to be
+ invalid.
+
+ <dt> <span class=prop-value>translateZ(<translation-value>)</span>
+
+ <dd> specifies a <a
+ href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
+ by the given amount in the Z direction. <Percentage> values are not
+ allowed in the translateZ translation-value, and if present will cause
+ the propery value to be invalid.
+
+ <dt> <span class=prop-value>scale3d(<number>, <number>,
+ <number>)</span>
+
+ <dd> specifies a 3D scale operation by the [sx,sy,sz] scaling vector
+ described by the 3 parameters.
+
+ <dt> <span class=prop-value>scaleZ(<number>)</span>
+
+ <dd> specifies a scale operation using the [1,1,sz] scaling vector, where
+ sz is given as the parameter.
+
+ <dt> <span class=prop-value>rotate3d(<number>, <number>,
+ <number>, <angle>)</span>
+ </dl>
+
+ <div class=todo>Clarify "clockwise". Describe in terms of right-hand rule?</div>
+
+ <dl>
+ <dd> specifies a clockwise 3D rotation by the angle specified in last
+ parameter about the [x,y,z] direction vector described by the first 3
+ parameters. If the direction vector is not of unit length, it will be
+ normalized. A direction vector that cannot be normalized, such as [0, 0,
+ 0], will cause the rotation to not be applied. This function is
+ equivalent to <code>matrix3d(1 + (1-cos(angle))*(x*x-1),
+ -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0,
+ z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1),
+ -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z,
+ x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0,
+ 1)</code>.
+
+ <dt> <span class=prop-value>rotateX(<angle>)</span>
+
+ <dd> specifies a clockwise rotation by the given angle about the X axis.
+
+ <dt> <span class=prop-value>rotateY(<angle>)</span>
+
+ <dd> specifies a clockwise rotation by the given angle about the Y axis.
+
+ <dt> <span class=prop-value>rotateZ(<angle>)</span>
+
+ <dd> specifies a clockwise rotation by the given angle about the Z axis.
+ This is a synonym for <span
+ class=prop-value>rotate(<angle>)</span>.
+
+ <dt> <span class=prop-value>perspective(<length>)</span>
+
+ <dd> specifies a perspective projection matrix. This matrix maps a
+ <em>viewing cube</em> onto a pyramid whose base is infinitely far away
+ from the viewer and whose peak represents the viewer's position. The
+ viewable area is the region bounded by the four edges of the viewport
+ (the portion of the browser window used for rendering the webpage between
+ the viewer's position and a point at a distance of infinity from the
+ viewer). The <em>depth</em>, given as the parameter to the function,
+ 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 matrix
+ is computed by starting with an identity matrix and replacing the value
+ at row 3, column 4 with the value -1/depth. The value for depth must be
+ greater than zero, otherwise the function is invalid.
+ <div class=issue>I think "viewport" is wrong here. It's the border box of
+ the element with perspective.</div>
+ </dl>
+ <!-- ======================================================================================================= -->
+
<h2 id=transform-values><span class=secno>13. </span> Transform Values and
Lists</h2>
@@ -1306,52 +1454,26 @@
example,
<pre>
- <div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
- </pre>
+<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
+</pre>
<p> is functionally equivalent to:
<pre>
- <div style="transform:translate(-10px,-20px)">
- <div style="transform:scale(2)">
- <div style="transform:rotate(45deg)">
- <div style="transform:translate(5px,10px)">
- </div>
- </div>
- </div>
- </div>
- </pre>
+<div style="transform:translate(-10px,-20px)">
+ <div style="transform:scale(2)">
+ <div style="transform:rotate(45deg)">
+ <div style="transform:translate(5px,10px)">
+ </div>
+ </div>
+ </div>
+</div>
+</pre>
<p> That is, in the absence of other styling that affects position and
dimensions, a nested set of transforms is equivalent to a single list of
transform functions, applied from the outside in. The resulting transform
- is the matrix multiplication of the list of transforms.
-
- <div class=example>
- <pre>
- div {
- transform: translate(100px, 100px);
- }
- </pre>
- Move the element by 100 pixels in both the X and Y directions.
- <div class=figure> <img alt="The 100px translation in X and Y"
- src=transform1.png></div>
- </div>
-
- <div class=example>
- <pre>
- div {
- height: 100px; width: 100px;
- transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
- }
- </pre>
- Move the element by 80 pixels in both the X and Y directions, then scale
- the element by 150%, then rotate it 45 degrees clockwise about the Z axis.
- Note that the scale and rotate operate about the center of the element,
- since the element has the default transform-origin of 50% 50%.
- <div class=figure> <img alt="The transform specified above"
- src="compound_transform.png"></div>
- </div>
+ is the matrix multiplication of the list of transforms.</p>
<!-- ======================================================================================================= -->
<h2 id=animation><span class=secno>14. </span> Transitions and animations
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Transforms.src.html 27 Jan 2012 07:22:10 -0000 1.12
+++ Transforms.src.html 27 Jan 2012 07:53:14 -0000 1.13
@@ -258,6 +258,43 @@
<p>
Transforms apply to <a href="#TermTransformableElement">transformable elements</a>.
</p>
+
+
+ <div class="example">
+<pre>
+div {
+ transform: translate(100px, 100px);
+}
+</pre>
+ <p>This transform moves the element by 100 pixels in both the X and Y directions.</p>
+ <div class="figure">
+ <img src="transform1.png" alt="The 100px translation in X and Y">
+ </div>
+ </div>
+
+ <div class="example">
+<pre>
+div {
+ height: 100px; width: 100px;
+ transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
+}
+</pre>
+ <p>Move the element by 80 pixels in both the X and Y directions, then scale the element by 150%, then rotate it 45 degrees clockwise about the Z axis. Note that the scale and rotate operate about the center of the element, since the element has the default transform-origin of 50% 50%.</p>
+ <div class="figure">
+ <img src="compound_transform.png" alt="The transform specified above">
+ </div>
+
+ <p>Note that an identical rendering can be obtained by nesting elements with the equivalent transforms:
+<pre>
+<div style="transform: translate(80px, 80px)">
+ <div style="transform: scale(1.5, 1.5)">
+ <div style="transform: rotate(45deg)"></div>
+ </div>
+</div>
+</pre>
+ </div>
+
+
<!-- This "in the HTML namespace" is awkward. Is there a better way? -->
<p>
In the HTML namespace, the transform property does not affect the flow of the content
@@ -324,12 +361,12 @@
<div class="transformed"></div>
</div>
</pre>
- <p>The transform is a 50° rotation about the vertical Y axis. Note how this makes the gray box appear
+<div class="figure">
+ <img src="examples/simple-3d-example.png" width="210" height="190" alt="Div with a rotateY transform.">
+</div>
+ <p>The transform is a 50° rotation about the vertical, Y axis. Note how this makes the blue box appear
narrower, but not three-dimensional.
</p>
- <div class="figure">
- <img src="examples/simple-3d-example.png" width="210" height="190" alt="Div with a rotateY transform.">
- </div>
</div>
<div class="example">
@@ -345,14 +382,14 @@
<div class="transformed"></div>
</div>
</pre>
- <p>The inner element has the same transform as before, but its rendering is now influenced by the perspective
+<div class="figure">
+ <img src="examples/simple-perspective-example.png" width="210" height="190" alt="Div with a rotateY transform,
+ and perspective on its container">
+</div>
+ <p>The inner element has the same transform as in Example 1, but its rendering is now influenced by the perspective
property on its parent element. Perspective causes vertices that have positive Z coordinates (closer to the viewer)
- to be scaled up in X and Y, and those futher away (negative Z coordinates) to be scaled down.
+ to be scaled up in X and Y, and those futher away (negative Z coordinates) to be scaled down, giving an appearance of depth.
</p>
- <div class="figure">
- <img src="examples/simple-perspective-example.png" width="210" height="190" alt="Div with a rotateY transform,
- and perspective on its container">
- </div>
</div>
<p>
@@ -1141,6 +1178,8 @@
Wherever <angle> is used in this specification, a <number> that is equal to
zero is also allowed, which is treated the same as an angle of zero degrees.
</p>
+
+ <h3 id="two-d-transform-functions">2D Transformation Functions</h3>
<dl>
<dt>
<span class="prop-value">matrix(<number>, <number>, <number>, <number>, <number>, <number>)</span>
@@ -1205,52 +1244,115 @@
specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew transformation along the Y axis</a> by the given angle.
</dd>
</dl>
+
+
+ <h3 id="three-d-transform-functions">3D Transformation Functions</h3>
+ <dl>
+ <dt>
+ <span class="prop-value">matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)</span>
+ </dt>
+ <dd>
+ specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
+ </dd>
+ <dt>
+ <span class="prop-value">translate3d(<translation-value>, <translation-value>, <translation-value>)</span>
+ </dt>
+ <dd>
+ specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively. <Percentage> values are not allowed in the tz translation-value, and if present will cause the propery value to be invalid.
+ </dd>
+ <dt>
+ <span class="prop-value">translateZ(<translation-value>)</span>
+ </dt>
+ <dd>
+ specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the Z direction. <Percentage> values are not allowed in the translateZ translation-value, and if present will cause the propery value to be invalid.
+ </dd>
+ <dt>
+ <span class="prop-value">scale3d(<number>, <number>, <number>)</span>
+ </dt>
+ <dd>
+ specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
+ </dd>
+ <dt>
+ <span class="prop-value">scaleZ(<number>)</span>
+ </dt>
+ <dd>
+ specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
+ </dd>
+ <dt>
+ <span class="prop-value">rotate3d(<number>, <number>, <number>, <angle>)</span>
+ </dt>
+ <div class="todo">Clarify "clockwise". Describe in terms of right-hand rule?</div>
+ <dd>
+ specifies a clockwise 3D rotation by the angle specified in last
+ parameter about the [x,y,z] direction vector described by the first 3
+ parameters. If the direction vector is not of unit length, it will be
+ normalized. A direction vector that cannot be normalized, such as [0,
+ 0, 0], will cause the rotation to not be applied. This function is
+ equivalent to <code>matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1)</code>.</dd>
+ <dt>
+ <span class="prop-value">rotateX(<angle>)</span>
+ </dt>
+ <dd>
+ specifies a clockwise rotation by the given angle about the X axis.
+ </dd>
+ <dt>
+ <span class="prop-value">rotateY(<angle>)</span>
+ </dt>
+ <dd>
+ specifies a clockwise rotation by the given angle about the Y axis.
+ </dd>
+ <dt>
+ <span class="prop-value">rotateZ(<angle>)</span>
+ </dt>
+ <dd>
+ specifies a clockwise rotation by the given angle about the Z axis. This is a synonym for <span class="prop-value">rotate(<angle>)</span>.
+ </dd>
+ <dt>
+ <span class="prop-value">perspective(<length>)</span>
+ </dt>
+ <dd>
+ specifies a perspective projection matrix. This matrix maps a <em>viewing cube</em> onto a pyramid whose
+ base is infinitely far away from the viewer and whose peak represents the viewer's position. The
+ viewable area is the region bounded by the four edges of the viewport (the portion of the browser
+ window used for rendering the webpage between the viewer's position and a point at a distance of
+ infinity from the viewer). The <em>depth</em>, given as the parameter to the function, 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 matrix
+ is computed by starting with an identity matrix and replacing the value at row 3, column 4 with
+ the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.
+ <div class="issue">I think "viewport" is wrong here. It's the border box of the element with perspective.</div>
+ </dd>
+ </dl>
+
+
+ <!-- ======================================================================================================= -->
+
<h2 id="transform-values">
Transform Values and Lists
</h2>
<p>
The <translation-value> values are defined as [<percentage> | <length>]. All other value types are described <a href="http://www.w3.org/TR/REC-CSS2/syndata.html#values">as CSS types</a>. If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided. For example,
</p>
- <pre>
- <div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
- </pre>
+<pre>
+<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
+</pre>
<p>
is functionally equivalent to:
</p>
- <pre>
- <div style="transform:translate(-10px,-20px)">
- <div style="transform:scale(2)">
- <div style="transform:rotate(45deg)">
- <div style="transform:translate(5px,10px)">
- </div>
- </div>
- </div>
- </div>
- </pre>
+<pre>
+<div style="transform:translate(-10px,-20px)">
+ <div style="transform:scale(2)">
+ <div style="transform:rotate(45deg)">
+ <div style="transform:translate(5px,10px)">
+ </div>
+ </div>
+ </div>
+</div>
+</pre>
<p>
That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the outside in. The resulting transform is the matrix multiplication of the list of transforms.
</p>
- <div class="example">
- <pre>
- div {
- transform: translate(100px, 100px);
- }
- </pre>Move the element by 100 pixels in both the X and Y directions.
- <div class="figure">
- <img src="transform1.png" alt="The 100px translation in X and Y">
- </div>
- </div>
- <div class="example">
- <pre>
- div {
- height: 100px; width: 100px;
- transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
- }
- </pre>Move the element by 80 pixels in both the X and Y directions, then scale the element by 150%, then rotate it 45 degrees clockwise about the Z axis. Note that the scale and rotate operate about the center of the element, since the element has the default transform-origin of 50% 50%.
- <div class="figure">
- <img src="compound_transform.png" alt="The transform specified above">
- </div>
- </div>
<!-- ======================================================================================================= -->
<h2 id="animation">
Received on Friday, 27 January 2012 07:53:20 UTC