Added skew() again for compatibility with legacy content

Author: dirkschulze

css3-transforms/ChangeLog

@@ -1,3 +1,6 @@
+2012-08-29 dschulze@adobe.com
+    Added skew() again for compatibility with legacy content.
+
 2012-08-29 dschulze@adobe.com
     Allow numerical interpolation on rotate3d, when normalized direction vectors are equal.
 

css3-transforms/Overview.html

@@ -547,11 +547,11 @@ <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
      class=css>scaleZ(1)</code>’, ‘<code class=css>rotate(0)</code>’,
      ‘<code class=css>rotate3d(1, 1, 1, 0)</code>’, ‘<code
      class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,
-     ‘<code class=css>rotateZ(0)</code>’, ‘<code
-     class=css>skewX(0)</code>’, ‘<code class=css>skewY(0)</code>’,
-     ‘<code class=css>matrix(1, 0, 0, 1, 0, 0)</code>’ and ‘<code
-     class=css>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
-     1)</code>’. A special case is perspective: ‘<code
+     ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,
+     0)</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code
+     class=css>skewY(0)</code>’, ‘<code class=css>matrix(1, 0, 0, 1, 0,
+     0)</code>’ and ‘<code class=css>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0,
+     0, 1, 0, 0, 0, 0, 1)</code>’. A special case is perspective: ‘<code
      class=css>perspective(infinity)</code>’. The value of m<sub>34</sub>
      becomes infinitesimal small and the transform function is therefore
      assumed to be equal to the identity matrix.</p>
@@ -2296,24 +2296,26 @@ <h3 id=neutral-element><span class=secno>14.2. </span> Neutral element for
    class=css>rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>,
    0)</code>’ (where <var>v</var> is a context dependent vector), ‘<code
    class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,
-   ‘<code class=css>rotateZ(0)</code>’, ‘<code
-   class=css>skewX(0)</code>’, ‘<code class=css>skewY(0)</code>’,
-   ‘<code class=css>matrix(0, 0, 0, 0, 0, 0)</code>’, ‘<code
-   class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-   0)</code>’ and ‘<code class=css>perspective(0)</code>’.
+   ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,
+   0)</code>’, skewX(0)‘<code class=css>, </code>’skewY(0)‘<code
+   class=css>, </code>’matrix(0, 0, 0, 0, 0, 0)‘<code class=css>,
+   </code>’matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)‘<code
+   class=css> and </code>’perspective(0)‘<code class=css>. </code>
 
   <p class=note> Animations to or from the neutral element of additions
-   ‘<code class=css>matrix</code>’, ‘<code class=css>matrix3d</code>’
-   and ‘<a href="#perspective"><code class=css>perspective</code></a>’
-   fall back to discrete animations (See <a
-   href="#matrix-interpolation">Interpolation of Matrices</a>).
+   ’matrix'‘<code class=css>, </code>’‘<code
+   class=css>matrix3d</code>’‘<code class=css> and </code>’‘<a
+   href="#perspective"><code class=property>perspective</code></a>’‘<code
+   class=css> fall back to discrete animations (See <a
+   href="#matrix-interpolation">Interpolation of Matrices</a>). </code>
 
   <div class=example>
    <p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent
     to the same animation with a values list with 2 values, the neutral
     element for addition for the domain of the target attribute (denoted 0)
-    and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’. <a
-    href="#SMIL3" rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a></p>
+    and v<sub>b</sub>, and ’‘<code
+    class=css>additive="sum"</code>’‘<code class=css>. <a href="#SMIL3"
+    rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a> </code></p>
 
    <pre>
 &lt;rect width="100" height="100"&gt;
@@ -2322,16 +2324,18 @@ <h3 id=neutral-element><span class=secno>14.2. </span> Neutral element for
 &lt;/rect&gt;</pre>
 
    <p> The neutral element for addition when performing a <var>by</var>
-    animation with ‘<code class=css>type="scale"</code>’ is the value 0.
-    Thus, performing the animation of the example above causes the rectangle
-    to be invisible at time 0s (since the animated transform list value is
-    ‘<code class=css>scale(0)</code>’), and be scaled back to its
-    original size at time 5s (since the animated transform list value is
-    ‘<code class=css>scale(1)</code>’).</p>
+    animation with ’‘<code class=css>type="scale"</code>’‘<code
+    class=css> is the value 0. Thus, performing the animation of the example
+    above causes the rectangle to be invisible at time 0s (since the animated
+    transform list value is </code>’‘<code
+    class=css>scale(0)</code>’‘<code class=css>), and be scaled back to
+    its original size at time 5s (since the animated transform list value is
+    </code>’‘<code class=css>scale(1)</code>’‘<code class=css>).
+    </code></p>
   </div>
 
-  <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG ‘<code
-   class=property>attributeName</code>’ attribute</h3>
+  <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG
+   ’attributeName' attribute</h3>
 
   <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>
    defines the ‘<code class=css><a
@@ -2440,12 +2444,20 @@ <h3 id=two-d-transform-functions><span class=secno>15.1. </span>2D
 
    <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
     specified in the parameter about the origin of the element, as defined by
-    the ‘<a href="#transform-origin"><code class=css><code
-    class=property>transform-origin</code></code></a>’ property. For
-    example, ‘<code class=css><code
-    class=css>rotate(90deg)</code></code>’ would cause elements to appear
+    the ‘<a href="#transform-origin"><code
+    class=property>transform-origin</code></a>’ property. For example,
+    ‘<code class=css>rotate(90deg)</code>’ would cause elements to appear
     rotated one-quarter of a turn in the clockwise direction.
 
+   <dt> <code class=css>skew(&lt;angle&gt;[, &lt;angle&gt;])</code>
+
+   <dd> specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and
+    Y. If the second parameter is not provided, it has a zero value.
+    <p class=note>Note that the behavior of ‘<code class=css>skew</code>’
+     is different from mutliplying ‘<code class=css>skewX</code>’ with
+     ‘<code class=css>skewY</code>’. Implementations must support this
+     function for compatibility with legacy content.</p>
+
    <dt id=skewX-function> <code class=css>skewX(&lt;angle&gt;)</code>
 
    <dd> specifies a <a href="#SkewXDefined">2D skew transformation along the
@@ -3182,6 +3194,13 @@ <h2 id=mathematical-description><span class=secno>21. </span> Mathematical
      href="#Rotate3dDefined">3D rotation</a> with vector [0,0,1] and
      parameter <em>alpha</em>.</p>
 
+   <li id=SkewDefined>
+    <p> A 2D skew like transformation with the parameters <em>alpha</em> and
+     <em>beta</em> is equivalent to the matrix:</p>
+    <img
+    alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    height=106 src=skew.png width=205>
+
    <li id=SkewXDefined>
     <p> A 2D skew transformation along the X axis with the parameter
      <em>alpha</em> is equivalent to the matrix:</p>

css3-transforms/Transforms.src.html

@@ -268,7 +268,7 @@ <h2 id="definitions">Definitions</h2>
                 are ''translate(0)'', ''translate3d(0, 0, 0)'', ''translateX(0)'',
                 ''translateY(0)'', ''translateZ(0)'', ''scale(1)'', ''scaleX(1)'', ''scaleY(1)'',
                 ''scaleZ(1)'', ''rotate(0)'', ''rotate3d(1, 1, 1, 0)'', ''rotateX(0)'',
-                ''rotateY(0)'', ''rotateZ(0)'', ''skewX(0)'', ''skewY(0)'', ''matrix(1, 0, 0, 1, 0,
+                ''rotateY(0)'', ''rotateZ(0)'', ''skew(0, 0)'', ''skewX(0)'', ''skewY(0)'', ''matrix(1, 0, 0, 1, 0,
                 0)'' and ''matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)''. A special
                 case is perspective: ''perspective(infinity)''. The value of m<sub>34</sub>
                 becomes infinitesimal small and the transform function is therefore assumed to be
@@ -2139,7 +2139,7 @@ <h3 id="neutral-element">
                 ''scaleX(0)'', ''scaleY(0)'', ''scaleZ(0)'', ''rotate(0)'',
                 ''rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>, 0)'' (where <var>v</var> is
                 a context dependent vector), ''rotateX(0)'', ''rotateY(0)'', ''rotateZ(0)'',
-                ''skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'', ''matrix3d(0, 0, 0, 0, 0,
+                ''skew(0, 0)'', skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'', ''matrix3d(0, 0, 0, 0, 0,
                 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)'' and ''perspective(0)''.
               </p>
 
@@ -2274,9 +2274,16 @@ <h3 id="two-d-transform-functions">2D Transform Functions</h3>
                 </dt>
                 <dd>
                   specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as
-                  defined by the '<code class="property">transform-origin</code>' property. For example, '<code class="css">rotate(90deg)</code>'
+                  defined by the 'transform-origin' property. For example, ''rotate(90deg)''
                   would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
                 </dd>
+                <dt>
+                  <code class="css">skew(&lt;angle&gt;[, &lt;angle&gt;])</code>
+                </dt>
+                <dd>
+                  specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and Y. If the second parameter is not provided, it has a zero value.
+                  <p class="note">Note that the behavior of ''skew'' is different from mutliplying ''skewX'' with ''skewY''. Implementations must support this function for compatibility with legacy content.</p>
+                </dd>
                 <dt id="skewX-function">
                   <code class="css">skewX(&lt;angle&gt;)</code>
                 </dt>
@@ -3074,6 +3081,12 @@ <h2 id="mathematical-description">
                     with vector [0,0,1] and parameter <em>alpha</em>.
                   </p>
                 </li>
+                <li id="SkewDefined">
+                  <p>
+                    A 2D skew like transformation with the parameters <em>alpha</em> and <em>beta</em> is equivalent to the matrix:
+                  </p>
+                  <img src="skew.png" alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="205" height="106">
+                </li>
                 <li id="SkewXDefined">
                   <p>
                     A 2D skew transformation along the X axis with the parameter <em>alpha</em> is equivalent to the matrix: