2010-03-23 simon.fraser@apple.com

- changed transform-origin definition to match background-origin.
- clarify that transform-origin is relative to the border box.

Author: smfr

css3-2d-transforms/ChangeLog

@@ -1,3 +1,8 @@
+2010-03-23 simon.fraser@apple.com
+
+- changed transform-origin definition to match background-origin.
+- clarify that transform-origin is relative to the border box.
+
 2009-11-17 dino@apple.com
 
 - removed the suggestion that position: relative could trigger a

css3-2d-transforms/Overview.html

@@ -21,15 +21,14 @@
 
    <h1>CSS 2D Transforms Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 November
-    2009</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 March 2010</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2009/ED-css3-2d-transforms-20091117">http://dev.w3.org/csswg/css3-2d-transforms/</a>
-     <!--http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091117-->
+     href="http://www.w3.org/TR/2010/ED-css3-2d-transforms-20100323">http://dev.w3.org/csswg/css3-2d-transforms/</a>
+     <!--http://www.w3.org/TR/2010/WD-css3-2d-transforms-20100323-->
 
     <dt>Latest version:
 
@@ -56,13 +55,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 November
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
-    rel=license>Copyright</a> &copy; 2009 <a
+    rel=license>Copyright</a> &copy; 2010 <a
     href="http://www.w3.org/"><acronym title="World Wide Web
     Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
     href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
-    of Technology">MIT</acronym></a>, <a
-    href="http://www.ercim.org/"><acronym title="European Research Consortium
-    for Informatics and Mathematics">ERCIM</acronym></a>, <a
+    of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
+    title="European Research Consortium for Informatics and
+    Mathematics">ERCIM</acronym></a>, <a
     href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
@@ -89,11 +88,13 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
 
   <p>The (<a
    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
-   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
-   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
-   for discussion of this specification. When sending e-mail, please put the
-   text &#8220;css3-2d-transforms&#8221; in the subject, preferably like
-   this: &#8220;[<!---->css3-2d-transforms<!---->] <em>&hellip;summary of
+   mailing list <a
+   href="mailto:www-style@w3.org?Subject=%5Bcss3-2d-transforms%5D%20PUT%20SUBJECT%20HERE">
+   www-style@w3.org</a> (see <a
+   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
+   discussion of this specification. When sending e-mail, please put the text
+   &#8220;css3-2d-transforms&#8221; in the subject, preferably like this:
+   &#8220;[<!---->css3-2d-transforms<!---->] <em>&hellip;summary of
    comment&hellip;</em>&#8221;
 
   <p>This document was produced by the <a href="/Style/CSS/members">CSS
@@ -119,36 +120,36 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
 
   <ul class=toc>
-   <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
+   <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
 
-   <li><a href="#transform-property"><span class=secno>2 </span> The <span
+   <li><a href="#transform-property"><span class=secno>2. </span> The <span
     class=prop-name>&lsquo;<code
     class=property>transform</code>&rsquo;</span> Property </a>
 
-   <li><a href="#transform-origin-property"><span class=secno>3 </span> The
+   <li><a href="#transform-origin-property"><span class=secno>3. </span> The
     <span class=prop-name>&lsquo;<code
     class=property>transform-origin</code>&rsquo;</span> Property </a>
 
-   <li><a href="#transform-functions"><span class=secno>4 </span> The
+   <li><a href="#transform-functions"><span class=secno>4. </span> The
     Transformation Functions </a>
 
-   <li><a href="#transform-values"><span class=secno>5 </span> Transform
+   <li><a href="#transform-values"><span class=secno>5. </span> Transform
     Values and Lists </a>
 
-   <li><a href="#animation"><span class=secno>6 </span> Transitions and
+   <li><a href="#animation"><span class=secno>6. </span> Transitions and
     animations between transform values </a>
 
-   <li><a href="#matrix-decomposition"><span class=secno>7 </span> Matrix
+   <li><a href="#matrix-decomposition"><span class=secno>7. </span> Matrix
     decomposition for animation </a>
 
-   <li><a href="#dom-interfaces"><span class=secno>8 </span> DOM Interfaces
+   <li><a href="#dom-interfaces"><span class=secno>8. </span> DOM Interfaces
     </a>
     <ul class=toc>
-     <li><a href="#cssmatrix-interface"><span class=secno>8.1 </span>
+     <li><a href="#cssmatrix-interface"><span class=secno>8.1. </span>
       CSSMatrix </a>
     </ul>
 
-   <li><a href="#references"><span class=secno>9 </span>References</a>
+   <li><a href="#references"><span class=secno>9. </span>References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
@@ -162,7 +163,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   </ul>
   <!--end-toc-->
 
-  <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
+  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
 
   <p><em>This section is not normative.</em>
 
@@ -245,7 +246,7 @@ <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
    to set the correct transform.</div>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-property><span class=secno>2 </span> The <span
+  <h2 id=transform-property><span class=secno>2. </span> The <span
    class=prop-name>&lsquo;<code class=property><a
    href="#effects">transform</a></code>&rsquo;</span> Property</h2>
 
@@ -287,7 +288,7 @@ <h2 id=transform-property><span class=secno>2 </span> The <span
     <tr>
      <td> <em>Percentages:</em>
 
-     <td> refer to the size of the element's box
+     <td> refer to the size of the element's border box
 
     <tr>
      <td> <em>Media:</em>
@@ -301,7 +302,7 @@ <h2 id=transform-property><span class=secno>2 </span> The <span
   </table>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-origin-property><span class=secno>3 </span> The <span
+  <h2 id=transform-origin-property><span class=secno>3. </span> The <span
    class=prop-name>&lsquo;<code class=property><a
    href="#transform-origin">transform-origin</a></code>&rsquo;</span>
    Property</h2>
@@ -316,11 +317,27 @@ <h2 id=transform-origin-property><span class=secno>3 </span> The <span
    applies the element's 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 at least one value is
-   not a keyword, then the first value represents the horizontal position and
-   the second represents the vertical position. Negative &lt;percentage&gt;
-   and &lt;length&gt; values are allowed.
+  <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
+   and at least one value is not a keyword, then the first value represents
+   the horizontal position (or offset) and the second represents the vertical
+   position (or offset). <var>&lt;percentage&gt;</var> and
+   <var>&lt;length&gt;</var> values here represent an offset of the transform
+   origin from the top left corner of the element's border box.
+
+  <p>If three or four values are given, then each
+   <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var> represents an
+   offset and must be preceded by a keyword, which specifies from which edge
+   the offset is given. For example, &lsquo;<code class=css>transform-origin:
+   bottom 10px right 20px</code>&rsquo; represents a &lsquo;<code
+   class=css>10px</code>&rsquo; vertical offset up from the bottom edge and a
+   &lsquo;<code class=css>20px</code>&rsquo; horizontal offset leftward from
+   the right edge. If three values are given, the missing offset is assumed
+   to be zero.
+
+  <p>Positive values represent an offset <em>inward</em> from the edge of the
+   border box. Negative values represent an offset <em>outward</em> from the
+   edge of the border box.
 
   <table class=propdef>
    <tbody>
@@ -332,9 +349,12 @@ <h2 id=transform-origin-property><span class=secno>3 </span> The <span
     <tr>
      <td> <em>Value:</em>
 
-     <td> [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [
-      &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ] | [ [
-      left | center | right ] || [ top | center | bottom ] ]
+     <td> [ top | bottom ] |<br>
+      [ &lt;percentage> | &lt;length&gt; | left | center | right ] [
+      &lt;percentage> | &lt;length&gt; | top | center | bottom ]? |<br>
+      [ center | [ left | right ] [ &lt;percentage> | &lt;length&gt; ]? ]
+      &amp;&amp; [ center | [ top | bottom ] [ &lt;percentage> |
+      &lt;length&gt; ]? ]<br>
 
     <tr>
      <td> <em>Initial:</em>
@@ -354,7 +374,7 @@ <h2 id=transform-origin-property><span class=secno>3 </span> The <span
     <tr>
      <td> <em>Percentages:</em>
 
-     <td> refer to the size of the element's box
+     <td> refer to the size of the element's border sbox
 
     <tr>
      <td> <em>Media:</em>
@@ -368,7 +388,7 @@ <h2 id=transform-origin-property><span class=secno>3 </span> The <span
   </table>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-functions><span class=secno>4 </span> The Transformation
+  <h2 id=transform-functions><span class=secno>4. </span> The Transformation
    Functions</h2>
 
   <p> The value of the <a class=prop-name href="#effects">transform</a>
@@ -460,7 +480,7 @@ <h2 id=transform-functions><span class=secno>4 </span> The Transformation
     of 0 is used for the Y angle (ie. no skew on the Y axis).
   </dl>
 
-  <h2 id=transform-values><span class=secno>5 </span> Transform Values and
+  <h2 id=transform-values><span class=secno>5. </span> Transform Values and
    Lists</h2>
 
   <p> The &lt;translation-value&gt; values are defined as [&lt;percentage&gt;
@@ -514,7 +534,7 @@ <h2 id=transform-values><span class=secno>5 </span> Transform Values and
   </div>
   <!-- ======================================================================================================= -->
 
-  <h2 id=animation><span class=secno>6 </span> Transitions and animations
+  <h2 id=animation><span class=secno>6. </span> Transitions and animations
    between transform values</h2>
 
   <p> When animating or transitioning the value of a transform property the
@@ -600,7 +620,7 @@ <h2 id=animation><span class=secno>6 </span> Transitions and animations
    from 1 to -1. At the time when the matrix is in such a state, the
    transformed element is not rendered.
 
-  <h2 id=matrix-decomposition><span class=secno>7 </span> Matrix
+  <h2 id=matrix-decomposition><span class=secno>7. </span> Matrix
    decomposition for animation</h2>
 
   <p> When interpolating between 2 matrices, each is decomposed into the
@@ -763,12 +783,12 @@ <h2 id=matrix-decomposition><span class=secno>7 </span> Matrix
         scale3d(scale[0], scale[1], scale[2])
       </pre>
 
-  <h2 id=dom-interfaces><span class=secno>8 </span> DOM Interfaces</h2>
+  <h2 id=dom-interfaces><span class=secno>8. </span> DOM Interfaces</h2>
 
   <p> This section describes the interfaces and functionality added to the
    DOM to support runtime access to the functionality described above.
 
-  <h3 id=cssmatrix-interface><span class=secno>8.1 </span> CSSMatrix</h3>
+  <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>
 
   <dl>
    <dt> <b>Interface <i><a id=DOM-CSSMatrix
@@ -1133,7 +1153,7 @@ <h3 id=cssmatrix-interface><span class=secno>8.1 </span> CSSMatrix</h3>
    matrix that is the result of applying the individual functions listed in
    the <code><a href="#effects">transform</a></code> property.
 
-  <h2 id=references><span class=secno>9 </span>References</h2>
+  <h2 id=references><span class=secno>9. </span>References</h2>
 
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->
@@ -1187,24 +1207,26 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>no
 
-     <td>refer to the size of the element's box
+     <td>refer to the size of the element's border box
 
      <td>visual
 
     <tr valign=baseline>
      <td><a class=property href="#transform-origin">transform-origin</a>
 
-     <td>[ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [
-      &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ] | [ [
-      left | center | right ] || [ top | center | bottom ] ]
+     <td>[ top | bottom ] | [ &lt;percentage> | &lt;length&gt; | left |
+      center | right ] [ &lt;percentage> | &lt;length&gt; | top | center |
+      bottom ]? | [ center | [ left | right ] [ &lt;percentage> |
+      &lt;length&gt; ]? ] &amp;&amp; [ center | [ top | bottom ] [
+      &lt;percentage> | &lt;length&gt; ]? ]
 
      <td>50% 50%
 
      <td>block-level and inline-level elements
 
      <td>no
 
-     <td>refer to the size of the element's box
+     <td>refer to the size of the element's border sbox
 
      <td>visual
   </table>
@@ -1214,10 +1236,10 @@ <h2 class=no-num id=index>Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
-   <li>transform, <a href="#effects" title=transform><strong>2</strong></a>
+   <li>transform, <a href="#effects" title=transform><strong>2.</strong></a>
 
    <li>transform-origin, <a href="#transform-origin"
-    title=transform-origin><strong>3</strong></a>
+    title=transform-origin><strong>3.</strong></a>
   </ul>
   <!--end-index-->
 </html>

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

@@ -209,7 +209,7 @@ <h2 id="transform-property">
               <em>Percentages:</em>
             </td>
             <td>
-              refer to the size of the element's box
+              refer to the size of the element's border box
             </td>
           </tr>
           <tr>
@@ -244,13 +244,30 @@ <h2 id="transform-origin-property">
         position.
       </p>
 
-      <p>
-        If only one value is specified, the second value is assumed to be
-        'center'. If at least one value is not a keyword, then the first value
-        represents the horizontal position and the second represents the
-        vertical position. Negative &lt;percentage&gt; and &lt;length&gt; values are
-        allowed.
+      <p>If only one value is specified, the second value is assumed to be
+      'center'. If two values are given and at least one value is not a keyword,
+      then the first value represents the horizontal position (or offset) and
+      the second represents the vertical position (or
+      offset). <var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var>
+      values here represent an offset of the transform origin from the top left corner
+      of the element's border box.
+    </p>
+
+      <p>If three or four values are given, then
+      each <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var>
+      represents an offset and must be preceded by a keyword,
+      which specifies from which edge the offset is given. For example,
+      ''transform-origin: bottom 10px right 20px'' represents a
+      ''10px'' vertical offset up from the bottom edge and a
+      ''20px'' horizontal offset leftward from the right edge. If
+      three values are given, the missing offset is assumed to be zero.
       </p>
+
+      <p>Positive values represent an offset <em>inward</em> from the edge of
+      the border box. Negative values represent an offset
+      <em>outward</em> from the edge of the border box.
+    </p>
+
       <table class="propdef">
         <tbody>
           <tr>
@@ -266,9 +283,9 @@ <h2 id="transform-origin-property">
               <em>Value:</em>
             </td>
             <td>
-              [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [
-              &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ] | [ [ left |
-              center | right ] || [ top | center | bottom ] ]
+    [ top | bottom ] |<br>
+    [ &lt;percentage> | &lt;length&gt; | left | center | right ] [ &lt;percentage> | &lt;length&gt; | top | center | bottom ]? |<br>
+    [ center | [ left | right ] [ &lt;percentage> | &lt;length&gt; ]? ] &amp;&amp; [ center | [ top | bottom ] [ &lt;percentage> | &lt;length&gt; ]? ]<br>
             </td>
           </tr>
           <tr>
@@ -300,7 +317,7 @@ <h2 id="transform-origin-property">
               <em>Percentages:</em>
             </td>
             <td>
-              refer to the size of the element's box
+              refer to the size of the element's border sbox
             </td>
           </tr>
           <tr>