|
4 | 4 | <link href=../default.css rel=stylesheet type=text/css> |
5 | 5 | <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> |
6 | 6 | <link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css> |
7 | | -<script defer src=http://test.csswg.org/harness/annotate.js#css-transforms-1_dev type=text/javascript></script> |
8 | | - |
9 | | -</head> |
10 | | -<body class=h-entry> |
11 | | -<style scoped type=text/css> |
| 7 | +<style type=text/css> |
12 | 8 | .example { |
13 | 9 | clear:both |
14 | 10 | } |
|
38 | 34 | } |
39 | 35 | </style> |
40 | 36 |
|
| 37 | +</head> |
| 38 | +<body class=h-entry> |
41 | 39 | <div class=head> |
42 | 40 | <p data-fill-with=logo><a class=logo href=http://www.w3.org/> |
43 | 41 | <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> |
44 | 42 | </a> |
45 | 43 | </p> |
46 | 44 | <h1 class="p-name no-ref" id=title>CSS Transforms Module Level 1</h1> |
47 | 45 | <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, |
48 | | - <span class=dt-updated><span class=value-title title=20140201>1 February 2014</span></span></span></h2> |
| 46 | + <span class=dt-updated><span class=value-title title=20140211>11 February 2014</span></span></span></h2> |
49 | 47 | <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-transforms/>http://dev.w3.org/csswg/css-transforms/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-transforms/>http://www.w3.org/TR/css3-transforms/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-transforms/>http://dev.w3.org/csswg/css-transforms/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120911/ rel=previous>http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120403/ rel=previous>http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a> |
50 | 48 | <dt>Feedback:</dt> |
51 | 49 | <dd><a href="mailto:public-fx@w3.org?subject=%5Bcss-transforms%5D%20feedback">public-fx@w3.org</a> |
52 | 50 | with subject line |
53 | | - “<kbd>[css-transforms] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/public-fx/ rel=discussion>archives</a>)<dt>Test Suite:<dd><a href=http://test.csswg.org/suites/css3-transforms/nightly-unstable/>http://test.csswg.org/suites/css3-transforms/nightly-unstable/</a><dt>Editors: |
| 51 | + “<kbd>[css-transforms] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/public-fx/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors: |
54 | 52 | <dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:simon.fraser@apple.com>Simon Fraser</a> (<span class="p-org org"><a href=http://www.apple.com/>Apple Inc</a></span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dino@apple.com>Dean Jackson</a> (<span class="p-org org"><a href=http://www.apple.com/>Apple Inc</a></span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:eoconnor@apple.com>Edward O’Connor</a> (<span class="p-org org"><a href=http://www.apple.com/>Apple Inc</a></span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dschulze@adobe.com>Dirk Schulze</a> (<span class="p-org org"><a href=http://www.adobe.com/>Adobe Systems Inc</a></span>)<dt>Former Editors: |
55 | 53 | <dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:hyatt@apple.com>David Hyatt</a> (<span class="p-org org"><a href=http://www.apple.com/>Apple Inc</a></span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:cmarrin@apple.com>Chris Marrin</a> (<span class="p-org org"><a href=http://www.apple.com/>Apple Inc</a></span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:ayg@aryeh.name>Aryeh Gregor</a> (<span class="p-org org"><a href=http://www.mozilla.org/>Mozilla</a></span>)<dt>Issues List:<dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transforms&resolution=---&cmdtype=doit">in Bugzilla</a></dl></div> |
56 | 54 | <div data-fill-with=warning></div> |
@@ -190,9 +188,9 @@ <h2 class="heading settled heading" data-level=4 id=terminology><span class=secn |
190 | 188 | <p>When used in this specification, terms have the meanings assigned in this section. |
191 | 189 |
|
192 | 190 | <dl> |
193 | | - <dt><dfn data-dfn-type=dfn data-noexport="" id=bounding-box>bounding box<a class=self-link href=#bounding-box></a></dfn></dt> |
| 191 | + <dt><dfn data-dfn-type=dfn data-export="" id=bounding-box>bounding box<a class=self-link href=#bounding-box></a></dfn></dt> |
194 | 192 | <dd> |
195 | | - A bounding box is the object bounding box for all SVG elements without an associated CSS layout box and the border box for all other elements. The bounding box of a table is the border box of its <a href=http://www.w3.org/TR/CSS21/tables.html#model>table wrapper box</a>, not its table box. |
| 193 | + A bounding box is the <a data-link-type=dfn href=https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox title="object bounding box">object bounding box</a> for all SVG elements without an associated CSS layout box and the border box for all other elements. The bounding box of a table is the border box of its <a href=http://www.w3.org/TR/CSS21/tables.html#model>table wrapper box</a>, not its table box. |
196 | 194 | </dd> |
197 | 195 | <dt><dfn data-dfn-type=dfn data-noexport="" id=transformable-element>transformable element<a class=self-link href=#transformable-element></a></dfn></dt> |
198 | 196 | <dd> |
@@ -220,7 +218,7 @@ <h2 class="heading settled heading" data-level=4 id=terminology><span class=secn |
220 | 218 | <dt><dfn data-dfn-type=dfn data-noexport="" id=transformation-matrix>transformation matrix<a class=self-link href=#transformation-matrix></a></dfn></dt> |
221 | 219 | <dd> |
222 | 220 | A matrix that defines the mathematical mapping from one coordinate system into another. It is computed from the values of the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> and <a class=property data-link-type=propdesc href=#propdef-transform-origin title=transform-origin>transform-origin</a> properties as described <a href=#transformation-matrix-computation>below</a>. |
223 | | - </dd> |
| 221 | + </dd> |
224 | 222 | <dt><dfn data-dfn-type=dfn data-noexport="" id=current-transformation-matrix-ctm>current transformation matrix (CTM)<a class=self-link href=#current-transformation-matrix-ctm></a></dfn></dt> |
225 | 223 | <dd> |
226 | 224 | A matrix that defines the mapping from the local coordinate system into the viewport coordinate system. |
@@ -631,7 +629,7 @@ <h3 class="heading settled heading" data-level=6.2 id=processing-of-perspective- |
631 | 629 |
|
632 | 630 | <p>If <var>w</var> = 0, (<var>x</var>′, <var>y</var>′, <var>z</var>′) = (<var>x</var> ⋅ <var>n</var>, <var>y</var> ⋅ <var>n</var>, <var>z</var> ⋅ <var>n</var>). <var>n</var> is an implementation-dependent value that should be chosen so that <var>x</var>′ or <var>y</var>′ is much larger than the viewport size, if possible. For example, (5px, 22px, 0px, 0) might become (5000px, 22000px, 0px), with <var>n</var> = 1000, but this value of <var>n</var> would be too small for (0.1px, 0.05px, 0px, 0). This specification does not define the value of <var>n</var> exactly. Conceptually, (<var>x</var>′, <var>y</var>′, <var>z</var>′) is <a href=http://en.wikipedia.org/wiki/Plane_at_infinity>infinitely far</a> in the direction (<var>x</var>, <var>y</var>, <var>z</var>). |
633 | 631 |
|
634 | | -<p>If <var>w</var> < 0 for all four corners of the transformed box, the box is not rendered. |
| 632 | +<p>If <var>w</var> < 0 for all four corners of the transformed box, the box is not rendered. |
635 | 633 |
|
636 | 634 | <p>If <var>w</var> < 0 for one to three corners of the transformed box, the box must be replaced by a polygon that has any parts with <var>w</var> < 0 cut out. This will in general be a polygon with three to five vertices, of which exactly two will have <var>w</var> = 0 and the rest <var>w</var> > 0. These vertices are then transformed to three-dimensional points using the rules just stated. Conceptually, a point with <var>w</var> < 0 is "behind" the viewer, so should not be visible. |
637 | 635 |
|
@@ -823,9 +821,9 @@ <h2 class="heading settled heading" data-level=11 id=perspective-origin-property |
823 | 821 |
|
824 | 822 | <dl data-dfn-for=perspective-origin data-dfn-type=value> |
825 | 823 | <dt><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#percentage-value title="<percentage>"><percentage></a></dt> |
826 | | - <dd><p>A percentage for the horizontal perspctive offset is relative to the width of the |
| 824 | + <dd><p>A percentage for the horizontal perspctive offset is relative to the width of the |
827 | 825 | <a data-link-type=dfn href=#bounding-box title="bounding box">bounding box</a>. |
828 | | - A percentage for the vertical offset is relative to height of the |
| 826 | + A percentage for the vertical offset is relative to height of the |
829 | 827 | <a data-link-type=dfn href=#bounding-box title="bounding box">bounding box</a>. The value for the horizontal |
830 | 828 | and vertical offset represent an offset from the top left corner of the |
831 | 829 | <a data-link-type=dfn href=#bounding-box title="bounding box">bounding box</a>. |
@@ -1419,7 +1417,7 @@ <h2 class="heading settled heading" data-level=19 id=interpolation-of-transform- |
1419 | 1417 | </p> |
1420 | 1418 | </div> |
1421 | 1419 |
|
1422 | | -<p>Two different types of transform functions that share the same primitive, or transform functions of the same type with different number of arguments can be interpolated. Both transform functions need a former conversion to the common primitive first and get interpolated numerically afterwards. The computed value will be the primitive with the resulting interpolated arguments. |
| 1420 | +<p>Two different types of transform functions that share the same primitive, or transform functions of the same type with different number of arguments can be interpolated. Both transform functions need a former conversion to the common primitive first and get interpolated numerically afterwards. The computed value will be the primitive with the resulting interpolated arguments. |
1423 | 1421 |
|
1424 | 1422 | <div class=example> |
1425 | 1423 | <p> |
@@ -1520,7 +1518,7 @@ <h3 class="heading settled heading" data-level=20.1 id=supporting-functions><spa |
1520 | 1518 | double max(double y, double x) returns the bigger value of the two passed values |
1521 | 1519 | double min(double y, double x) returns the smaller value of the two passed values |
1522 | 1520 | double cos(double) returns the cosines of passed value |
1523 | | - double sin(double) returns the sine of passed value |
| 1521 | + double sin(double) returns the sine of passed value |
1524 | 1522 | double acos(double) returns the inverse cosine of passed value |
1525 | 1523 | double abs(double) returns the absolute value of the passed value |
1526 | 1524 | double rad2deg(double) transforms a value in radian to degree and returns it |
@@ -1570,16 +1568,16 @@ <h4 class="heading settled heading" data-level=20.2.1 id=decomposing-a-2d-matrix |
1570 | 1568 | else |
1571 | 1569 | scale[1] = -scale[1] |
1572 | 1570 |
|
1573 | | -// Renormalize matrix to remove scale. |
| 1571 | +// Renormalize matrix to remove scale. |
1574 | 1572 | if (scale[0]) |
1575 | 1573 | row0x *= 1 / scale[0] |
1576 | 1574 | row0y *= 1 / scale[0] |
1577 | | -if (scale[1]) |
| 1575 | +if (scale[1]) |
1578 | 1576 | row1x *= 1 / scale[1] |
1579 | 1577 | row1y *= 1 / scale[1] |
1580 | 1578 |
|
1581 | | -// Compute rotation and renormalize matrix. |
1582 | | -angle = atan2(row0y, row0x); |
| 1579 | +// Compute rotation and renormalize matrix. |
| 1580 | +angle = atan2(row0y, row0x); |
1583 | 1581 |
|
1584 | 1582 | if (angle) |
1585 | 1583 | // Rotate(-angle) = [cos(angle), sin(angle), -sin(angle), cos(angle)] |
@@ -1610,7 +1608,7 @@ <h4 class="heading settled heading" data-level=20.2.2 id=interpolation-of-decomp |
1610 | 1608 | Interpolation of decomposed 2D matrix values |
1611 | 1609 | </span><a class=self-link href=#interpolation-of-decomposed-2d-matrix-values></a></h4> |
1612 | 1610 |
|
1613 | | -<p>Before two decomposed 2D matrix values can be interpolated, the following |
| 1611 | +<p>Before two decomposed 2D matrix values can be interpolated, the following |
1614 | 1612 |
|
1615 | 1613 | <pre>Input: translationA ; a 2 component vector |
1616 | 1614 | scaleA ; a 2 component vector |
@@ -1644,7 +1642,7 @@ <h4 class="heading settled heading" data-level=20.2.2 id=interpolation-of-decomp |
1644 | 1642 | if (abs(angleA - angleB) > 180) |
1645 | 1643 | if (angleA > angleB) |
1646 | 1644 | angleA -= 360 |
1647 | | - else |
| 1645 | + else |
1648 | 1646 | angleB -= 360 |
1649 | 1647 | </pre> |
1650 | 1648 | <p>Afterwards, each component of the decomposed values translation, scale, angle, m11 to m22 of the source matrix get linearly interpolated with each corresponding component of the destination matrix. |
@@ -1814,8 +1812,8 @@ <h4 class="heading settled heading" data-level=20.3.2 id=interpolation-of-decomp |
1814 | 1812 |
|
1815 | 1813 | <p class=note>Note: For instance, <code>translate[0]</code> of the source matrix and <code>translate[0]</code> of the destination matrix are interpolated numerically, and the result is used to set the translation of the animating element. |
1816 | 1814 |
|
1817 | | -<p>Quaternions of the decomposed source matrix are interpolated with quaternions of the decomposed destination matrix using the spherical linear interpolation (Slerp) as described by the pseudo code below: |
1818 | | - |
| 1815 | +<p>Quaternions of the decomposed source matrix are interpolated with quaternions of the decomposed destination matrix using the spherical linear interpolation (Slerp) as described by the pseudo code below: |
| 1816 | + |
1819 | 1817 | <pre>Input: quaternionA ; a 4 component vector |
1820 | 1818 | quaternionB ; a 4 component vector |
1821 | 1819 | t ; interpolation parameter with 0 <= t <= 1 |
@@ -1853,7 +1851,7 @@ <h4 class="heading settled heading" data-level=20.3.3 id=recomposing-to-a-3d-mat |
1853 | 1851 | Output: matrix ; a 4x4 matrix |
1854 | 1852 |
|
1855 | 1853 | Supporting functions (matrix is a 4x4 matrix): |
1856 | | - matrix multiply(matrix a, matrix b) returns the 4x4 matrix product of a * b |
| 1854 | + matrix multiply(matrix a, matrix b) returns the 4x4 matrix product of a * b |
1857 | 1855 |
|
1858 | 1856 | // apply perspective |
1859 | 1857 | for (i = 0; i < 4; i++) |
@@ -1989,6 +1987,7 @@ <h2 class="heading settled heading" data-level=21 id=mathematical-description><s |
1989 | 1987 | <img alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}" height=106 src=perspective.png width=143> |
1990 | 1988 | </li> |
1991 | 1989 | </ul> |
| 1990 | + |
1992 | 1991 | <h2 class="no-ref no-num heading settled heading" id=conformance><span class=content> |
1993 | 1992 | Conformance</span><a class=self-link href=#conformance></a></h2> |
1994 | 1993 |
|
|
0 commit comments