|
36 | 36 |
|
37 | 37 | <h1>CSS Transforms</h1> |
38 | 38 |
|
39 | | - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 March 2012</h2> |
| 39 | + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 March 2012</h2> |
40 | 40 |
|
41 | 41 | <dl> |
42 | 42 | <dt>This version: |
43 | 43 |
|
44 | 44 | <dd> <a |
45 | | - href="http://www.w3.org/TR/2012/ED-css3-transforms-20120315/">http://dev.w3.org/csswg/css3-transforms/</a> |
46 | | - <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120315--> |
| 45 | + href="http://www.w3.org/TR/2012/ED-css3-transforms-20120316/">http://dev.w3.org/csswg/css3-transforms/</a> |
| 46 | + <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120316--> |
47 | 47 |
|
48 | 48 | <dt>Latest version: |
49 | 49 |
|
@@ -2035,20 +2035,15 @@ <h3 id=two-d-transform-functions><span class=secno>13.1. </span>2D |
2035 | 2035 | class=css>rotate(90deg)</code></code>’ would cause elements to |
2036 | 2036 | appear rotated one-quarter of a turn in the clockwise direction. |
2037 | 2037 |
|
2038 | | - <dt> <code class=css>skew(<angle>[, <angle>])</code> |
2039 | | - |
2040 | | - <dd> specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and |
2041 | | - Y. If the second parameter is not provided, it is has a zero value. |
2042 | | - |
2043 | 2038 | <dt> <code class=css>skewX(<angle>)</code> |
2044 | 2039 |
|
2045 | | - <dd> specifies a <a href="#SkewDefined">2D skew transformation along the X |
2046 | | - axis</a> by the given angle. The skew vector is [ax,0]. |
| 2040 | + <dd> specifies a <a href="#SkewXDefined">2D skew transformation along the |
| 2041 | + X axis</a> by the given angle. |
2047 | 2042 |
|
2048 | 2043 | <dt> <code class=css>skewY(<angle>)</code> |
2049 | 2044 |
|
2050 | | - <dd> specifies a <a href="#SkewDefined">2D skew transformation along the Y |
2051 | | - axis</a> by the given angle. The skew vector is [0,ay]. |
| 2045 | + <dd> specifies a <a href="#SkewYDefined">2D skew transformation along the |
| 2046 | + Y axis</a> by the given angle. |
2052 | 2047 | </dl> |
2053 | 2048 |
|
2054 | 2049 | <h3 id=three-d-transform-functions><span class=secno>13.2. </span>3D |
@@ -2177,7 +2172,7 @@ <h2 id=animation><span class=secno>15. </span> Transitions and Animations |
2177 | 2172 | <ul> |
2178 | 2173 | <li> For translate, translate3d, translateX, translateY, translateZ, |
2179 | 2174 | scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotateX, rotateY, |
2180 | | - rotateZ, skew, skewX and skewY functions: |
| 2175 | + rotateZ, skewX and skewY functions: |
2181 | 2176 | <ul> |
2182 | 2177 | <li> the individual components of the function are interpolated |
2183 | 2178 | numerically. |
@@ -2219,9 +2214,9 @@ <h2 id=animation><span class=secno>15. </span> Transitions and Animations |
2219 | 2214 | <p> The identity functions are translate(0), translate3d(0, 0, 0), |
2220 | 2215 | translateX(0), translateY(0), translateZ(0), scale(1), scale3d(1, 1, |
2221 | 2216 | 1), scaleX(1), scaleY(1), scaleZ(1), rotate(0), rotate3d(1, 1, 1, 0), |
2222 | | - rotateX(0), rotateY(0), rotateZ(0), skew(0), skewX(0), skewY(0), |
2223 | | - matrix(1, 0, 0, 1, 0, 0) and matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, |
2224 | | - 0, 0, 0, 0, 1).</p> |
| 2217 | + rotateX(0), rotateY(0), rotateZ(0), skewX(0), skewY(0), matrix(1, 0, |
| 2218 | + 0, 1, 0, 0) and matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, |
| 2219 | + 1).</p> |
2225 | 2220 | </ul> |
2226 | 2221 |
|
2227 | 2222 | <li> If both the ‘<code class=property>from</code>’ and |
@@ -2459,12 +2454,19 @@ <h2 id=mathematical-description><span class=secno>17. </span> Mathematical |
2459 | 2454 | href="#Rotate3dDefined">3D rotation</a> with vector [0,0,1] and |
2460 | 2455 | parameter <em>alpha</em>.</p> |
2461 | 2456 |
|
2462 | | - <li id=SkewDefined> |
2463 | | - <p> A 2D skew transformation with the parameters <em>alpha</em> and |
| 2457 | + <li id=SkewXDefined> |
| 2458 | + <p> A 2D skew transformation along the X axis with the parameter |
| 2459 | + <em>alpha</em> is equivalent to the matrix:</p> |
| 2460 | + <img |
| 2461 | + alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
| 2462 | + height=106 src=skewX.png width=155> |
| 2463 | + |
| 2464 | + <li id=SkewYDefined> |
| 2465 | + <p> A 2D skew transformation along the Y axis with the parameter |
2464 | 2466 | <em>beta</em> is equivalent to the matrix:</p> |
2465 | 2467 | <img |
2466 | | - alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
2467 | | - height=106 src=skew.png width=205> |
| 2468 | + alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
| 2469 | + height=106 src=skewY.png width=155> |
2468 | 2470 |
|
2469 | 2471 | <li id=Translate3dDefined> |
2470 | 2472 | <p> A 3D translation with the parameters <em>tx</em>, <em>ty</em> and |
|
0 commit comments