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

Author: grorg

css3-2d-transforms/ChangeLog

@@ -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.

css3-2d-transforms/Overview.html

@@ -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 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
    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>&lsquo;<a
-   href="#effects"><code class=property>transform</code></a>&rsquo;</span>
-   property effectively accumulates all the <span class=prop-name>&lsquo;<a
-   href="#effects"><code class=property>transform</code></a>&rsquo;</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>&lsquo;<a href="#effects"><code
+   class=property>transform</code></a>&rsquo;</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 @@ <h2 id=transform-property><span class=secno>2. </span> The <span
    class=prop-name>&lsquo;<a href="#effects"><code
    class=property>transform</code></a>&rsquo;</span> Property</h2>
 
-  <p> A two-dimensional transformation is applied to an element through the
-   <span class=prop-name>&lsquo;<a href="#effects"><code
-   class=property>transform</code></a>&rsquo;</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>&lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo;</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 @@ <h2 id=transform-origin-property><span class=secno>3. </span> The <span
 
   <p> The <span class=prop-name>&lsquo;<a href="#transform-origin"><code
    class=property>transform-origin</code></a>&rsquo;</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
    &lsquo;<code class=property>center</code>&rsquo;. If two values are given
@@ -458,7 +460,9 @@ <h2 id=transform-functions><span class=secno>4. </span> The Transformation
     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(&lt;number&gt;)</span>
 
@@ -476,7 +480,9 @@ <h2 id=transform-functions><span class=secno>4. </span> The Transformation
     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(&lt;angle&gt;)</span>
 
@@ -518,6 +524,11 @@ <h2 id=transform-values><span class=secno>5. </span> Transform Values and
   &lt;/div&gt;
   </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 @@ <h3 id=recomposing-the-matrix><span class=secno>7.4. </span>Recomposing the
     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 @@ <h2 class=no-num id=property-index>Property index</h2>
      <th>Media
 
    <tbody>
-    <tr valign=baseline>
+    <tr>
      <td><a class=property href="#effects">transform</a>
 
      <td>none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
@@ -1295,7 +1306,7 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>visual
 
-    <tr valign=baseline>
+    <tr>
      <td><a class=property href="#transform-origin">transform-origin</a>
 
      <td>[ top | bottom ] | [ &lt;percentage> | &lt;length&gt; | left |

css3-2d-transforms/Overview.src.html

@@ -93,15 +93,13 @@ <h2>Introduction</h2>
         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 @@ <h2 id="transform-property">
         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 id="transform-origin-property">
       </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 @@ <h2 id="transform-functions">
           <span class="prop-value">scale(&lt;number&gt;[, &lt;number&gt;])</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(&lt;number&gt;)</span>
@@ -404,7 +405,8 @@ <h2 id="transform-functions">
           <span class="prop-value">rotate(&lt;angle&gt;)</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(&lt;angle&gt;)</span>
@@ -441,6 +443,9 @@ <h2 id="transform-values">
     &lt;/div&gt;
   &lt;/div&gt;
   </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 @@ <h3>Recomposing the matrix</h3>
     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)";