W3C home > Mailing lists > Public > public-css-commits@w3.org > July 2011

csswg/css3-2d-transforms ChangeLog,1.7,1.8 Overview.html,1.15,1.16 Overview.src.html,1.15,1.16

From: Dean Jackson via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 25 Jul 2011 00:37:22 +0000
To: public-css-commits@w3.org
Message-Id: <E1Ql9Ag-0003Wx-NK@lionel-hutz.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>&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 @@
    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 @@
 
   <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 @@
     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 @@
     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 @@
   &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 @@
     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 | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
@@ -1295,7 +1306,7 @@
 
      <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 |

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(&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 @@
           <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 @@
     &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 @@
     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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 25 July 2011 00:37:29 GMT