- From: Dean Jackson via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 25 Jul 2011 00:37:22 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-2d-transforms
In directory hutz:/tmp/cvs-serv13525
Modified Files:
ChangeLog Overview.html Overview.src.html
Log Message:
2011-07-24 dino@apple.com
- Boris feedback from 26 May 2011
- Transforms are composed matrix multiplications of the functions
- Transforms apply to coordinate systems, not to elements
- Elika feedback from 12 May
- examples for scale and rotate
- Boris feedback from 15 April
- typo in matrix recomposition
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-2d-transforms/Overview.html,v
retrieving revision 1.15
retrieving revision 1.16
diff -u -d -r1.15 -r1.16
--- Overview.html 14 Apr 2011 16:47:32 -0000 1.15
+++ Overview.html 25 Jul 2011 00:37:20 -0000 1.16
@@ -21,14 +21,14 @@
<h1>CSS 2D Transforms</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 July 2011</h2>
<dl>
<dt>This version:
<dd> <a
- href="http://www.w3.org/TR/2011/ED-css3-2d-transforms-20110414">http://dev.w3.org/csswg/css3-2d-transforms/</a>
- <!--http://www.w3.org/TR/2011/WD-css3-2d-transforms-20110414-->
+ href="http://www.w3.org/TR/2011/ED-css3-2d-transforms-20110724/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
+ <!--http://www.w3.org/TR/2011/WD-css3-2d-transforms-20110724-->
<dt>Latest version:
@@ -211,12 +211,12 @@
property establishes a new <em>local coordinate system</em> at the element
that it is applied to. Transformations are cumulative. That is, elements
establish their local coordinate system within the coordinate system of
- their parent. In this way, a <span class=prop-name>‘<a
- href="#effects"><code class=property>transform</code></a>’</span>
- property effectively accumulates all the <span class=prop-name>‘<a
- href="#effects"><code class=property>transform</code></a>’</span>
- properties of its ancestors. The accumulation of these transforms defines
- a <em>current transformation matrix (CTM)</em> for the element.
+ their parent. From the perspective of the user, an element effectively
+ accumulates all the <span class=prop-name>‘<a href="#effects"><code
+ class=property>transform</code></a>’</span> properties of its
+ ancestors as well as any local transform applied to it. The accumulation
+ of these transforms defines a <em>current transformation matrix (CTM)</em>
+ for the element.
<p> The transform property does not affect the flow of the content
surrounding the transformed element. However, the value of the overflow
@@ -271,13 +271,15 @@
class=prop-name>‘<a href="#effects"><code
class=property>transform</code></a>’</span> Property</h2>
- <p> A two-dimensional transformation is applied to an element through the
- <span class=prop-name>‘<a href="#effects"><code
- class=property>transform</code></a>’</span> property. This property
- contains a list of <a href="#transform-functions">transform functions</a>.
- The final transformation value for an element is obtained by performing a
- matrix concatenation of each entry in the list. The set of transform
- functions is similar to those allowed by SVG.
+ <p> A two-dimensional transformation is applied to the coordinate system an
+ element renders in through the <span class=prop-name>‘<a
+ href="#effects"><code class=property>transform</code></a>’</span>
+ property. This property contains a list of <a
+ href="#transform-functions">transform functions</a>. The final
+ transformation value for a coordinate system is obtained by converting
+ each function in the list to its corresponding matrix (either defined in
+ this specification or by reference to the SVG specification), then
+ multiplying the matrices.
<table class=propdef>
<tbody>
@@ -329,13 +331,13 @@
<p> The <span class=prop-name>‘<a href="#transform-origin"><code
class=property>transform-origin</code></a>’</span> property
- establishes the origin of transformation for an element. This property is
- applied by first translating the element by the negated value of the
- property, then applying the element's transform, then translating by the
- property value. This effectively moves the desired transformation origin
- of the element to (0,0) in the local coordinate system, then applies the
- element's transform, then moves the element back to its original position.
-
+ establishes the origin of transformation for a coordinate system. This
+ property is applied by first translating the element's coordinate system
+ by the negated value of the property, then applying the local transform,
+ then translating by the property value. This effectively moves the desired
+ transformation origin of the element to (0,0) in the local coordinate
+ system, then applies the local transform, then moves the element back to
+ its original position.
<p>If only one value is specified, the second value is assumed to be
‘<code class=property>center</code>’. If two values are given
@@ -458,7 +460,9 @@
href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a>
operation by the [sx,sy] scaling vector described by the 2 parameters. If
the second parameter is not provided, it is takes a value equal to the
- first.
+ first. For example, scale(1, 1) would leave an element unchanged, while
+ scale(2, 2) would cause it to appear twice as long in both the X and Y
+ axes, or four times its typical geometric size.
<dt> <span class=prop-value>scaleX(<number>)</span>
@@ -476,7 +480,9 @@
href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
rotation</a> by the angle specified in the parameter about the origin of
the element, as defined by the <a
- href="#transform-origin"><em>transform-origin</em></a> property.
+ href="#transform-origin"><em>transform-origin</em></a> property. For
+ example, rotate(90deg) would cause elements to appear rotated one-quarter
+ of a turn in the clockwise direction.
<dt> <span class=prop-value>skewX(<angle>)</span>
@@ -518,6 +524,11 @@
</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 {
@@ -850,8 +861,8 @@
s += " translate3d(" + translate[0] + ", " + translate[1] + ", " + translate[2] + ")";
s += " rotateX(" + rotate[0] + ")";
- s += " rotateY(" + rotate[0] + ")";
- s += " rotateZ(" + rotate[0] + ")";
+ s += " rotateY(" + rotate[1] + ")";
+ s += " rotateZ(" + rotate[2] + ")";
s += " matrix3d(1,0,0,0, 0,1,0,0, 0," + skew[2] + ",1,0, 0,0,0,1)";
s += " matrix3d(1,0,0,0, 0,1,0,0, " + skew[1] + ",0,1,0, 0,0,0,1)";
@@ -1280,7 +1291,7 @@
<th>Media
<tbody>
- <tr valign=baseline>
+ <tr>
<td><a class=property href="#effects">transform</a>
<td>none | <transform-function> [ <transform-function> ]*
@@ -1295,7 +1306,7 @@
<td>visual
- <tr valign=baseline>
+ <tr>
<td><a class=property href="#transform-origin">transform-origin</a>
<td>[ top | bottom ] | [ <percentage> | <length> | left |
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-2d-transforms/ChangeLog,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- ChangeLog 14 Apr 2011 16:47:17 -0000 1.7
+++ ChangeLog 25 Jul 2011 00:37:20 -0000 1.8
@@ -1,16 +1,29 @@
+2011-07-24 dino@apple.com
+
+- Boris feedback from 26 May 2011
+ - Transforms are composed matrix multiplications of the functions
+ - Transforms apply to coordinate systems, not to elements
+- Elika feedback from 12 May
+ - examples for scale and rotate
+- Boris feedback from 15 April
+ - typo in matrix recomposition
+
2011-04-14 eoconnor@apple.com
- - Added myself to authors
- - Removed rotateX(0) & rotateY(0) from list of identity functions (thanks
- to Boris Zbarsky for catching this)
+
+- Added myself to authors
+- Removed rotateX(0) & rotateY(0) from list of identity functions (thanks
+ to Boris Zbarsky for catching this)
2011-04-01 eoconnor@apple.com
- - Clarified that tranforms do not apply to inlines which may be split
- into multiple boxes.
+
+- Clarified that tranforms do not apply to inlines which may be split
+ into multiple boxes.
2011-03-21 simon.fraser@apple.com
- - Removed "Module Level 3" from the title.
+
+- Removed "Module Level 3" from the title.
-2010-05-3 simon.fraser@apple.com
+2010-05-03 simon.fraser@apple.com
- Added myself to authors
- Obfuscated email addresses slightly to reduce spam.
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-2d-transforms/Overview.src.html,v
retrieving revision 1.15
retrieving revision 1.16
diff -u -d -r1.15 -r1.16
--- Overview.src.html 14 Apr 2011 16:47:25 -0000 1.15
+++ Overview.src.html 25 Jul 2011 00:37:20 -0000 1.16
@@ -93,15 +93,13 @@
multiple inline-level boxes.
</p>
<p>
- Specifying a value other than 'none' for the <span
- class="prop-name">'transform'</span> property establishes a new
- <em>local coordinate system</em> at the element that it is applied to.
- Transformations are cumulative. That is, elements establish their local
- coordinate system within the coordinate system of their parent. In this
- way, a <span class="prop-name">'transform'</span> property effectively
- accumulates all the <span class="prop-name">'transform'</span>
- properties of its ancestors. The accumulation of these transforms
- defines a <em>current transformation matrix (CTM)</em> for the element.
+ Specifying a value other than 'none' for the <span class="prop-name">'transform'</span>
+ property establishes a new <em>local coordinate system</em> at the element that it is
+ applied to. Transformations are cumulative. That is, elements establish their local
+ coordinate system within the coordinate system of their parent. From the perspective of the
+ user, an element effectively accumulates all the <span class="prop-name">'transform'</span>
+ properties of its ancestors as well as any local transform applied to it. The accumulation
+ of these transforms defines a <em>current transformation matrix (CTM)</em> for the element.
</p>
<p>
The transform property does not affect the flow of the content
@@ -159,12 +157,14 @@
The <span class="prop-name">'transform'</span> Property
</h2>
<p>
- A two-dimensional transformation is applied to an element through the <span
+ A two-dimensional transformation is applied to the coordinate system an element
+ renders in through the <span
class="prop-name">'transform'</span> property. This property contains a
list of <a href="#transform-functions">transform functions</a>. The
- final transformation value for an element is obtained by performing a
- matrix concatenation of each entry in the list. The set of transform
- functions is similar to those allowed by SVG.
+ final transformation value for a coordinate system is obtained by converting
+ each function in the list to its corresponding matrix (either defined in
+ this specification or by reference to the SVG specification), then multiplying
+ the matrices.
</p>
<table class="propdef">
<tbody>
@@ -239,12 +239,12 @@
</h2>
<p>
The <span class="prop-name">'transform-origin'</span> property
- establishes the origin of transformation for an element. This property
- is applied by first translating the element by the negated value of the
- property, then applying the element's transform, then translating by the
+ establishes the origin of transformation for a coordinate system. This property
+ is applied by first translating the element's coordinate system by the negated value of the
+ property, then applying the local transform, then translating by the
property value. This effectively moves the desired transformation origin
of the element to (0,0) in the local coordinate system, then applies
- the element's transform, then moves the element back to its original
+ the local transform, then moves the element back to its original
position.
</p>
@@ -386,7 +386,8 @@
<span class="prop-value">scale(<number>[, <number>])</span>
</dt>
<dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
+ specifies a <a href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X
+ and Y axes, or four times its typical geometric size.
</dd>
<dt>
<span class="prop-value">scaleX(<number>)</span>
@@ -404,7 +405,8 @@
<span class="prop-value">rotate(<angle>)</span>
</dt>
<dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property.
+ specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property. For example, rotate(90deg) would cause elements to appear
+ rotated one-quarter of a turn in the clockwise direction.
</dd>
<dt>
<span class="prop-value">skewX(<angle>)</span>
@@ -441,6 +443,9 @@
</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 {
@@ -785,8 +790,8 @@
s += " translate3d(" + translate[0] + ", " + translate[1] + ", " + translate[2] + ")";
s += " rotateX(" + rotate[0] + ")";
- s += " rotateY(" + rotate[0] + ")";
- s += " rotateZ(" + rotate[0] + ")";
+ s += " rotateY(" + rotate[1] + ")";
+ s += " rotateZ(" + rotate[2] + ")";
s += " matrix3d(1,0,0,0, 0,1,0,0, 0," + skew[2] + ",1,0, 0,0,0,1)";
s += " matrix3d(1,0,0,0, 0,1,0,0, " + skew[1] + ",0,1,0, 0,0,0,1)";
Received on Monday, 25 July 2011 00:37:29 UTC