Mon, 12 Mar 2012 11:30:19 -0600
Hyperlink two CSS2.1 definitions
vhardy@3672 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
vhardy@3672 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
vhardy@3672 | 3 | |
vhardy@3672 | 4 | <html lang=en> |
vhardy@3672 | 5 | <head profile="http://www.w3.org/2006/03/hcard"><meta |
vhardy@3672 | 6 | content="text/html; charset=utf-8" http-equiv=Content-Type> |
vhardy@3672 | 7 | |
vhardy@3720 | 8 | <title>CSS Transforms</title> |
simon@4357 | 9 | <link href="../default.css" rel=stylesheet type="text/css"> |
vhardy@3672 | 10 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
vhardy@3672 | 11 | type="text/css"> |
vhardy@3672 | 12 | |
vhardy@3672 | 13 | <style type="text/css"> |
simon@4376 | 14 | .term { |
simon@4376 | 15 | font-style: italic; |
simon@4376 | 16 | } |
simon@4363 | 17 | |
dschulze@4323 | 18 | .todo { |
dschulze@4323 | 19 | font-weight: bold; |
dschulze@4323 | 20 | border-left: 0.5em solid #f44; |
dschulze@4323 | 21 | padding-left: 1em; |
dschulze@4323 | 22 | margin-top: 0.5em; |
dschulze@4323 | 23 | color: #a0a0a0; |
dschulze@4323 | 24 | } |
dschulze@4323 | 25 | |
dschulze@4323 | 26 | .todo:before { |
dschulze@4323 | 27 | content: "TO DO : "; |
dschulze@4323 | 28 | color: #f44; |
dschulze@4323 | 29 | } |
vhardy@3672 | 30 | </style> |
vhardy@3672 | 31 | |
vhardy@3672 | 32 | <body> |
vhardy@3672 | 33 | <div class=head id=div-head> <!--begin-logo--> |
vhardy@3672 | 34 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
vhardy@3672 | 35 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
vhardy@3672 | 36 | |
simon@4357 | 37 | <h1>CSS Transforms</h1> |
vhardy@3672 | 38 | |
ayg@4736 | 39 | <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 March 2012</h2> |
vhardy@3672 | 40 | |
vhardy@3672 | 41 | <dl> |
vhardy@3672 | 42 | <dt>This version: |
vhardy@3672 | 43 | |
vhardy@3672 | 44 | <dd> <a |
ayg@4736 | 45 | href="http://www.w3.org/TR/2012/ED-css3-transforms-20120312/">http://dev.w3.org/csswg/css3-transforms/</a> |
ayg@4736 | 46 | <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120312--> |
vhardy@3672 | 47 | |
vhardy@3672 | 48 | <dt>Latest version: |
vhardy@3672 | 49 | |
vhardy@3672 | 50 | <dd><a |
simon@4357 | 51 | href="http://www.w3.org/TR/css3-transforms">http://www.w3.org/TR/css3-transforms/</a> |
vhardy@3672 | 52 | |
vhardy@3672 | 53 | |
simon@4583 | 54 | <dt>Editor's draft: |
simon@4581 | 55 | |
simon@4583 | 56 | <dd><a |
simon@4583 | 57 | href="http://dev.w3.org/csswg/css3-transforms/">http://dev.w3.org/csswg/css3-transforms/</a> |
simon@4583 | 58 | |
simon@4581 | 59 | |
vhardy@3672 | 60 | <dt>Previous version: |
vhardy@3672 | 61 | |
simon@4357 | 62 | <dd>None |
vhardy@3672 | 63 | |
vhardy@3672 | 64 | <dt id=editors-list>Editors: |
vhardy@3672 | 65 | |
vhardy@3672 | 66 | <dd>Simon Fraser (<a href="http://www.apple.com/">Apple Inc</a>) |
vhardy@3672 | 67 | <simon.fraser @apple.com> |
vhardy@3672 | 68 | |
vhardy@3672 | 69 | <dd>Dean Jackson (<a href="http://www.apple.com/">Apple Inc</a>) <dino |
vhardy@3672 | 70 | @apple.com> |
vhardy@3672 | 71 | |
vhardy@3672 | 72 | <dd>David Hyatt (<a href="http://www.apple.com/">Apple Inc</a>) <hyatt |
vhardy@3672 | 73 | @apple.com> |
vhardy@3672 | 74 | |
vhardy@3672 | 75 | <dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>) |
vhardy@3672 | 76 | <cmarrin @apple.com> |
vhardy@3672 | 77 | |
vhardy@3672 | 78 | <dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>) |
vhardy@3672 | 79 | <eoconnor @apple.com> |
dschulze@4323 | 80 | |
dschulze@4323 | 81 | <dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>) |
dschulze@4323 | 82 | <dschulze @adobe.com> |
simon@4581 | 83 | |
simon@4581 | 84 | <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) <ayg |
simon@4581 | 85 | @aryeh.name> |
simon@4581 | 86 | |
simon@4581 | 87 | <dt>Issues list: |
simon@4581 | 88 | |
simon@4581 | 89 | <dd><a |
simon@4581 | 90 | href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transforms&resolution=---&cmdtype=doit">in |
simon@4581 | 91 | Bugzilla</a> |
simon@4581 | 92 | |
simon@4581 | 93 | <dt>Test suite: |
simon@4581 | 94 | |
simon@4581 | 95 | <dd>none yet |
vhardy@3672 | 96 | </dl> |
vhardy@3672 | 97 | <!--begin-copyright--> |
vhardy@3672 | 98 | <p class=copyright><a |
vhardy@3672 | 99 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
dschulze@4323 | 100 | rel=license>Copyright</a> © 2012 <a |
vhardy@3672 | 101 | href="http://www.w3.org/"><acronym |
vhardy@3672 | 102 | title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a |
vhardy@3672 | 103 | href="http://www.csail.mit.edu/"><acronym |
vhardy@3672 | 104 | title="Massachusetts Institute of Technology">MIT</acronym></a>, <a |
vhardy@3672 | 105 | href="http://www.ercim.eu/"><acronym |
vhardy@3672 | 106 | title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, |
vhardy@3672 | 107 | <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a |
vhardy@3672 | 108 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
vhardy@3672 | 109 | <a |
vhardy@3672 | 110 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
vhardy@3672 | 111 | and <a |
vhardy@3672 | 112 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
vhardy@3672 | 113 | use</a> rules apply.</p> |
vhardy@3672 | 114 | <!--end-copyright--> |
vhardy@3672 | 115 | <hr title="Separator for header"> |
vhardy@3672 | 116 | </div> |
vhardy@3672 | 117 | |
vhardy@3672 | 118 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
vhardy@3672 | 119 | |
vhardy@3672 | 120 | <p>CSS transforms allows elements styled with CSS to be transformed in |
dschulze@4323 | 121 | two-dimensional or three-dimensional space. This specification is the |
vhardy@3672 | 122 | convergence of the <a href="http://www.w3.org/TR/css3-2d-transforms/">CSS |
vhardy@3672 | 123 | 2D transforms</a>, <a href="http://www.w3.org/TR/css3-3d-transforms/">CSS |
vhardy@3672 | 124 | 3D transforms</a> and <a |
vhardy@3672 | 125 | href="http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/">SVG |
vhardy@3672 | 126 | transforms</a> specifications. |
vhardy@3672 | 127 | |
vhardy@3672 | 128 | <h2 class="no-num no-toc" id=status>Status of this document</h2> |
vhardy@4360 | 129 | |
vhardy@4360 | 130 | <p class=note> This specification merges the former CSS 2D Transforms and |
vhardy@4360 | 131 | CSS 3D Transforms specifications and will also merge CSS Transforms and |
vhardy@4360 | 132 | SVG Transforms. The merge is in progress and the specification is not yet |
vhardy@4360 | 133 | ready for review.</p> |
vhardy@3672 | 134 | <!--begin-status--> |
vhardy@3672 | 135 | |
vhardy@3672 | 136 | <p>This is a public copy of the editors' draft. It is provided for |
vhardy@3672 | 137 | discussion only and may change at any moment. Its publication here does |
vhardy@3672 | 138 | not imply endorsement of its contents by W3C. Don't cite this document |
vhardy@3672 | 139 | other than as work in progress. |
vhardy@3672 | 140 | |
vhardy@3672 | 141 | <p>The (<a |
vhardy@3672 | 142 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
vhardy@3672 | 143 | mailing list <a |
simon@4357 | 144 | href="mailto:www-style@w3.org?Subject=%5Bcss3-transforms%5D%20PUT%20SUBJECT%20HERE"> |
vhardy@3672 | 145 | www-style@w3.org</a> (see <a |
vhardy@3672 | 146 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
vhardy@3672 | 147 | discussion of this specification. When sending e-mail, please put the text |
simon@4357 | 148 | “css3-transforms” in the subject, preferably like this: |
simon@4357 | 149 | “[<!---->css3-transforms<!---->] <em>…summary of |
vhardy@3672 | 150 | comment…</em>” |
vhardy@3672 | 151 | |
vhardy@3672 | 152 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
vhardy@3672 | 153 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
vhardy@3672 | 154 | |
vhardy@3672 | 155 | <p>This document was produced by a group operating under the <a |
vhardy@3672 | 156 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
vhardy@3672 | 157 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
vhardy@3672 | 158 | rel=disclosure>public list of any patent disclosures</a> made in |
vhardy@3672 | 159 | connection with the deliverables of the group; that page also includes |
vhardy@3672 | 160 | instructions for disclosing a patent. An individual who has actual |
vhardy@3672 | 161 | knowledge of a patent which the individual believes contains <a |
vhardy@3672 | 162 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
vhardy@3672 | 163 | Claim(s)</a> must disclose the information in accordance with <a |
vhardy@3672 | 164 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
vhardy@3672 | 165 | W3C Patent Policy</a>.</p> |
vhardy@3672 | 166 | <!--end-status--> |
vhardy@3672 | 167 | |
vhardy@3672 | 168 | <p> The <a href=ChangeLog>list of changes made to this specification</a> is |
vhardy@3672 | 169 | available. |
vhardy@3672 | 170 | |
vhardy@3672 | 171 | <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
vhardy@3672 | 172 | <!--begin-toc--> |
vhardy@3672 | 173 | |
vhardy@3672 | 174 | <ul class=toc> |
vhardy@3672 | 175 | <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> |
vhardy@3672 | 176 | |
simon@4345 | 177 | <li><a href="#module-interactions"><span class=secno>2. </span>Module |
simon@4345 | 178 | Interactions</a> |
simon@4345 | 179 | |
simon@4365 | 180 | <li><a href="#css-values"><span class=secno>3. </span>CSS Values</a> |
simon@4345 | 181 | |
simon@4345 | 182 | <li><a href="#definitions"><span class=secno>4. </span>Definitions</a> |
simon@4345 | 183 | |
simon@4345 | 184 | <li><a href="#transform-rendering"><span class=secno>5. </span>The |
simon@4345 | 185 | Transform Rendering Model</a> |
simon@4345 | 186 | <ul class=toc> |
simon@4345 | 187 | <li><a href="#transform-3d-rendering"><span class=secno>5.1. </span>3D |
simon@4345 | 188 | Transform Rendering</a> |
simon@4345 | 189 | </ul> |
simon@4345 | 190 | |
dschulze@4602 | 191 | <li><a href="#transform-property"><span class=secno>6. </span> The |
dschulze@4602 | 192 | ‘<code class=css><code |
dschulze@4602 | 193 | class=property>transform</code></code>’ Property </a> |
dschulze@4598 | 194 | |
dschulze@4598 | 195 | <li><a href="#svg-transform"><span class=secno>7. </span> The SVG |
dschulze@4602 | 196 | ‘<code class=css><code |
dschulze@4602 | 197 | class=property>transform</code></code>’ Attribute </a> |
vhardy@3672 | 198 | <ul class=toc> |
dschulze@4598 | 199 | <li><a href="#transform-attribute-specificity"><span class=secno>7.1. |
dschulze@4602 | 200 | </span>SVG ‘<code class=css><code |
dschulze@4602 | 201 | class=property>transform</code></code>’ attribute specificity</a> |
dschulze@4602 | 202 | |
dschulze@4598 | 203 | |
dschulze@4601 | 204 | <li><a href="#svg-syntax"><span class=secno>7.2. </span>Syntax of the |
dschulze@4602 | 205 | SVG ‘<code class=css><code |
dschulze@4602 | 206 | class=property>transform</code></code>’ attribute</a> |
vhardy@3672 | 207 | <ul class=toc> |
dschulze@4598 | 208 | <li><a href="#svg-transform-list"><span class=secno>7.2.1. |
dschulze@4598 | 209 | </span>Transform List</a> |
dschulze@4598 | 210 | |
dschulze@4598 | 211 | <li><a href="#svg-functional-notation"><span class=secno>7.2.2. |
dschulze@4598 | 212 | </span>Functional Notations</a> |
dschulze@4598 | 213 | |
dschulze@4598 | 214 | <li><a href="#svg-data-types"><span class=secno>7.2.3. </span>SVG Data |
dschulze@4598 | 215 | Types</a> |
dschulze@4598 | 216 | <ul class=toc> |
dschulze@4598 | 217 | <li><a href="#svg-transform-value"><span class=secno>7.2.3.1. |
dschulze@4602 | 218 | </span>The <var><translation-value></var> and |
dschulze@4602 | 219 | <var><length></var> type</a> |
dschulze@4598 | 220 | |
dschulze@4598 | 221 | <li><a href="#svg-angle"><span class=secno>7.2.3.2. </span>The |
dschulze@4602 | 222 | <var><angle></var> type</a> |
dschulze@4598 | 223 | |
dschulze@4598 | 224 | <li><a href="#svg-number"><span class=secno>7.2.3.3. </span>The |
dschulze@4602 | 225 | <var><number></var> type</a> |
dschulze@4598 | 226 | </ul> |
dschulze@4598 | 227 | </ul> |
dschulze@4598 | 228 | |
dschulze@4598 | 229 | <li><a href="#svg-gradient-transform-pattern-transform"><span |
dschulze@4598 | 230 | class=secno>7.3. </span>The SVG ‘<code |
dschulze@4598 | 231 | class=property>gradientTransform</code>’ and ‘<code |
dschulze@4598 | 232 | class=property>patternTransform</code>’ attributes</a> |
dschulze@4598 | 233 | |
dschulze@4601 | 234 | <li><a href="#svg-transformation-functions"><span class=secno>7.4. |
dschulze@4598 | 235 | </span>SVG transformation functions</a> |
dschulze@4598 | 236 | |
dschulze@4601 | 237 | <li><a href="#svg-three-dimensional-functions"><span class=secno>7.5. |
dschulze@4601 | 238 | </span>SVG and 3D transformation functions</a> |
dschulze@4601 | 239 | |
dschulze@4598 | 240 | <li><a href="#svg-object-bounding-box"><span class=secno>7.6. |
dschulze@4598 | 241 | </span>Object bounding box units</a> |
dschulze@4598 | 242 | |
dschulze@4598 | 243 | <li><a href="#transform-attribute-dom"><span class=secno>7.7. </span>SVG |
dschulze@4602 | 244 | DOM interface for the ‘<code class=css><code |
dschulze@4602 | 245 | class=property>transform</code></code>’ attribute</a> |
dschulze@4598 | 246 | |
dschulze@4598 | 247 | <li><a href="#svg-animation"><span class=secno>7.8. </span>SVG |
dschulze@4598 | 248 | Animation</a> |
dschulze@4598 | 249 | <ul class=toc> |
dschulze@4598 | 250 | <li><a href="#svg-animate-element"><span class=secno>7.8.1. </span>The |
dschulze@4598 | 251 | SVG ‘<code class=property>animate</code>’ and |
dschulze@4598 | 252 | ‘<code class=property>set</code>’ element</a> |
dschulze@4598 | 253 | |
dschulze@4598 | 254 | <li><a href="#svg-attribute-name"><span class=secno>7.8.2. </span>The |
dschulze@4598 | 255 | SVG ‘<code class=property>attributeName</code>’ |
dschulze@4598 | 256 | attribute</a> |
dschulze@4598 | 257 | |
dschulze@4598 | 258 | <li><a href="#svg-attribute-type"><span class=secno>7.8.3. </span>The |
dschulze@4598 | 259 | SVG ‘<code class=property>attributeType</code>’ |
dschulze@4598 | 260 | attribute</a> |
dschulze@4598 | 261 | |
dschulze@4598 | 262 | <li><a href="#svg-animateTransform-extension"><span class=secno>7.8.4. |
dschulze@4598 | 263 | </span>The SVG ‘<code |
dschulze@4598 | 264 | class=property>animateTransform</code>’ element</a> |
vhardy@3672 | 265 | </ul> |
vhardy@3672 | 266 | </ul> |
vhardy@3672 | 267 | |
dschulze@4598 | 268 | <li><a href="#transform-origin-property"><span class=secno>8. </span> The |
dschulze@4602 | 269 | ‘<code class=css><code |
dschulze@4602 | 270 | class=property>transform-origin</code></code>’ Property </a> |
vhardy@3672 | 271 | |
dschulze@4598 | 272 | <li><a href="#transform-style-property"><span class=secno>9. </span> The |
dschulze@4602 | 273 | ‘<code class=css><code |
dschulze@4602 | 274 | class=property>transform-style</code></code>’ Property </a> |
simon@4365 | 275 | |
dschulze@4598 | 276 | <li><a href="#perspective-property"><span class=secno>10. </span> The |
dschulze@4602 | 277 | ‘<code class=css><code |
dschulze@4602 | 278 | class=property>perspective</code></code>’ Property </a> |
dschulze@4598 | 279 | |
dschulze@4598 | 280 | <li><a href="#perspective-origin-property"><span class=secno>11. </span> |
dschulze@4602 | 281 | The ‘<code class=css><code |
dschulze@4602 | 282 | class=property>perspective-origin</code></code>’ Property </a> |
simon@4345 | 283 | |
dschulze@4598 | 284 | <li><a href="#backface-visibility-property"><span class=secno>12. </span> |
dschulze@4602 | 285 | The ‘<code class=css><code |
dschulze@4602 | 286 | class=property>backface-visibility</code></code>’ Property </a> |
simon@4345 | 287 | |
dschulze@4598 | 288 | <li><a href="#transform-functions"><span class=secno>13. </span> The |
vhardy@3672 | 289 | Transformation Functions </a> |
simon@4358 | 290 | <ul class=toc> |
dschulze@4598 | 291 | <li><a href="#two-d-transform-functions"><span class=secno>13.1. |
simon@4358 | 292 | </span>2D Transformation Functions</a> |
simon@4358 | 293 | |
dschulze@4598 | 294 | <li><a href="#three-d-transform-functions"><span class=secno>13.2. |
simon@4358 | 295 | </span>3D Transformation Functions</a> |
simon@4358 | 296 | </ul> |
vhardy@3672 | 297 | |
dschulze@4598 | 298 | <li><a href="#transform-values"><span class=secno>14. </span> Transform |
vhardy@3672 | 299 | Values and Lists </a> |
vhardy@3672 | 300 | |
dschulze@4598 | 301 | <li><a href="#animation"><span class=secno>15. </span> Transitions and |
dschulze@4511 | 302 | Animations between Transform Values </a> |
vhardy@3672 | 303 | |
dschulze@4598 | 304 | <li><a href="#matrix-decomposition"><span class=secno>16. </span> Matrix |
dschulze@4511 | 305 | Decomposition for Animation </a> |
vhardy@3672 | 306 | <ul class=toc> |
dschulze@4598 | 307 | <li><a href="#unmatrix"><span class=secno>16.1. </span>Unmatrix</a> |
dschulze@4598 | 308 | |
dschulze@4598 | 309 | <li><a href="#animating-the-components"><span class=secno>16.2. |
vhardy@3672 | 310 | </span>Animating the components</a> |
vhardy@3672 | 311 | |
dschulze@4598 | 312 | <li><a href="#recomposing-the-matrix"><span class=secno>16.3. |
vhardy@3672 | 313 | </span>Recomposing the matrix</a> |
vhardy@3672 | 314 | </ul> |
vhardy@3672 | 315 | |
dschulze@4598 | 316 | <li><a href="#mathematical-description"><span class=secno>17. </span> |
dschulze@4511 | 317 | Mathematical Description of Transformation Functions </a> |
dschulze@4491 | 318 | |
dschulze@4598 | 319 | <li><a href="#references"><span class=secno>18. </span>References</a> |
vhardy@3672 | 320 | <ul class=toc> |
vhardy@3672 | 321 | <li class=no-num><a href="#normative-references">Normative |
vhardy@3672 | 322 | references</a> |
vhardy@3672 | 323 | |
vhardy@3672 | 324 | <li class=no-num><a href="#other-references">Other references</a> |
vhardy@3672 | 325 | </ul> |
vhardy@3672 | 326 | |
vhardy@3672 | 327 | <li class=no-num><a href="#property-index">Property index</a> |
vhardy@3672 | 328 | |
vhardy@3672 | 329 | <li class=no-num><a href="#index">Index</a> |
vhardy@3672 | 330 | </ul> |
vhardy@3672 | 331 | <!--end-toc--> |
vhardy@3672 | 332 | |
vhardy@3672 | 333 | <h2 id=introduction><span class=secno>1. </span>Introduction</h2> |
vhardy@3672 | 334 | |
vhardy@3672 | 335 | <p><em>This section is not normative.</em> |
vhardy@3672 | 336 | |
vhardy@3672 | 337 | <p> The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual |
dschulze@4511 | 338 | formatting model</a> describes a coordinate system within each element is |
dschulze@4511 | 339 | positioned. Positions and sizes in this coordinate space can be thought of |
dschulze@4511 | 340 | as being expressed in pixels, starting in the origin of point with |
dschulze@4511 | 341 | positive values proceeding to the right and down. |
vhardy@3672 | 342 | |
dschulze@4602 | 343 | <p> This coordinate space can be modified with the ‘<a |
dschulze@4602 | 344 | href="#effects"><code class=css><code |
dschulze@4602 | 345 | class=property>transform</code></code></a>’ property. Using |
dschulze@4602 | 346 | transform, elements can be translated, rotated and scaled in two or three |
dschulze@4602 | 347 | dimensional space. |
simon@4345 | 348 | |
simon@4345 | 349 | <p> Additional properties make working with transforms easier, and allow |
simon@4345 | 350 | the author to control how nested three-dimensional transforms interact. |
simon@4345 | 351 | |
simon@4345 | 352 | <ul> |
dschulze@4602 | 353 | <li> The ‘<a href="#transform-origin"><code class=css><code |
dschulze@4602 | 354 | class=property>transform-origin</code></code></a>’ property |
dschulze@4602 | 355 | provides a convenient way to control the origin about which transforms on |
dschulze@4602 | 356 | an element are applied. |
dschulze@4602 | 357 | |
dschulze@4602 | 358 | <li> The ‘<a href="#perspective"><code class=css><code |
dschulze@4602 | 359 | class=property>perspective</code></code></a>’ property allows the |
dschulze@4602 | 360 | author to make child elements with three-dimensional transforms appear as |
dschulze@4602 | 361 | if they live in a common three-dimensional space. The ‘<a |
dschulze@4602 | 362 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 363 | class=property>perspective-origin</code></code></a>’ property |
dschulze@4602 | 364 | provides control over the origin at which perspective is applied, |
dschulze@4602 | 365 | effectively changing the location of the "vanishing point". |
dschulze@4602 | 366 | |
dschulze@4602 | 367 | <li> The ‘<a href="#transform-style"><code class=css><code |
dschulze@4602 | 368 | class=property>transform-style</code></code></a>’ property allows |
simon@4345 | 369 | 3D-transformed elements and their 3D-transformed descendants to share a |
simon@4345 | 370 | common three-dimensional space, allowing the construction of hierarchies |
simon@4345 | 371 | of three-dimensional objects. |
simon@4345 | 372 | |
dschulze@4602 | 373 | <li> The ‘<a href="#backface-visibility"><code class=css><code |
dschulze@4602 | 374 | class=property>backface-visibility</code></code></a>’ property |
dschulze@4602 | 375 | comes into play when an element is flipped around via three-dimensional |
dschulze@4602 | 376 | transforms such that its reverse side is visible to the viewer. In some |
dschulze@4602 | 377 | situations it is desirable to hide the element in this situation, which |
dschulze@4602 | 378 | is possible using the value of ‘<code |
dschulze@4602 | 379 | class=property>hidden</code>’ for this property. |
simon@4345 | 380 | </ul> |
simon@4345 | 381 | |
dschulze@4602 | 382 | <p> Note that while some values of the ‘<a href="#effects"><code |
dschulze@4602 | 383 | class=css><code class=property>transform</code></code></a>’ property |
dschulze@4602 | 384 | allow an element to be transformed in a three-dimensional coordinate |
dschulze@4602 | 385 | system, the elements themselves are not three-dimensional objects. |
dschulze@4602 | 386 | Instead, they exist on a two-dimensional plane (a flat surface) and have |
dschulze@4602 | 387 | no depth. |
vhardy@3672 | 388 | |
vhardy@3672 | 389 | <div class=issue> There are two roles for transformations in layout: (1) |
vhardy@3672 | 390 | transformations that adjust the position of the affected content without |
vhardy@3672 | 391 | changing the normal layout of that content (much like relative |
vhardy@3672 | 392 | positioning) and (2) transformation of the content prior to layout that |
vhardy@3672 | 393 | affects the layout of that content. See <a |
vhardy@3672 | 394 | href="http://lists.w3.org/Archives/Public/www-style/2007Oct/0209">http://lists.w3.org/Archives/Public/www-style/2007Oct/0209</a> |
vhardy@3672 | 395 | for examples of both cases. The "transform" property (as defined in this |
vhardy@3672 | 396 | document) is equally useful for both roles. This document is focused on |
vhardy@3672 | 397 | satisfying the first role. There is, however, an architectural question |
vhardy@3672 | 398 | that arises because there needs to be a way to distinguish which role an |
vhardy@3672 | 399 | author of a stylesheet wants. The key question is which is the default |
vhardy@3672 | 400 | behavior/role for the "transform" property and how is the other |
vhardy@3672 | 401 | behavior/role indicated by a stylesheet author. If you have an opinion on |
vhardy@3672 | 402 | this topic, please send feedback.</div> |
vhardy@3672 | 403 | |
vhardy@3672 | 404 | <div class=issue> What do fixed backgrounds do in transforms? They should |
vhardy@3672 | 405 | probably ignore the transform completely, since - even transformed - the |
vhardy@3672 | 406 | object should be acting as "porthole" through which the fixed background |
vhardy@3672 | 407 | can be viewed in its original form.</div> |
vhardy@3672 | 408 | <!-- ======================================================================================================= --> |
vhardy@3672 | 409 | |
simon@4345 | 410 | <h2 id=module-interactions><span class=secno>2. </span>Module Interactions</h2> |
simon@4345 | 411 | |
simon@4345 | 412 | <p>Write me |
simon@4345 | 413 | |
simon@4365 | 414 | <h2 id=css-values><span class=secno>3. </span>CSS Values</h2> |
simon@4345 | 415 | |
simon@4345 | 416 | <p>Write me |
simon@4345 | 417 | |
simon@4345 | 418 | <h2 id=definitions><span class=secno>4. </span>Definitions</h2> |
dschulze@4323 | 419 | |
dschulze@4323 | 420 | <p> When used in this specification, terms have the meanings assigned in |
dschulze@4323 | 421 | this section. |
dschulze@4323 | 422 | |
dschulze@4323 | 423 | <dl> |
dschulze@4483 | 424 | <dt id=TermBoundingBox><dfn id=bounding-box>bounding box</dfn> |
dschulze@4483 | 425 | |
dschulze@4483 | 426 | <dd> |
dschulze@4483 | 427 | <p> A bounding box is the object bounding box for all SVG elements |
dschulze@4483 | 428 | without an associated CSS layout box and the border box for all other |
dschulze@4483 | 429 | elements.</p> |
dschulze@4483 | 430 | |
simon@4365 | 431 | <dt id=TermTransformableElement><dfn |
simon@4365 | 432 | id=transformable-element>transformable element</dfn> |
dschulze@4323 | 433 | |
dschulze@4323 | 434 | <dd> |
ayg@4736 | 435 | <p> A transformable element in the HTML namespace which is either a <a |
ayg@4736 | 436 | href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a> |
ayg@4736 | 437 | or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic |
ayg@4736 | 438 | inline-level element</a>, or an element in the SVG namespace (see <a |
ayg@4736 | 439 | href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) which has the |
ayg@4736 | 440 | attributes ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 441 | class=property>transform</code></code></a>’, ‘<code |
dschulze@4323 | 442 | class=property>patternTransform</code>’ or ‘<code |
simon@4345 | 443 | class=property>gradientTransform</code>’.</p> |
simon@4345 | 444 | |
simon@4365 | 445 | <dt id=TermPerspectiveMatrix><dfn id=perpsective-matrix>perpsective |
simon@4365 | 446 | matrix</dfn> |
simon@4345 | 447 | |
simon@4345 | 448 | <dd> |
dschulze@4602 | 449 | <p> A matrix computed from the values of the ‘<a |
dschulze@4602 | 450 | href="#perspective"><code class=css><code |
dschulze@4602 | 451 | class=property>perspective</code></code></a>’ and ‘<a |
dschulze@4602 | 452 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 453 | class=property>perspective-origin</code></code></a>’ properties as |
dschulze@4602 | 454 | described <a href="#perspective-matrix-computation">below</a>.</p> |
simon@4365 | 455 | |
simon@4366 | 456 | <dt id=TermTransformationMatrix><dfn |
simon@4366 | 457 | id=transformation-matrix>transformation matrix</dfn> |
simon@4365 | 458 | |
simon@4365 | 459 | <dd> |
dschulze@4602 | 460 | <p> A matrix computed from the values of the ‘<a |
dschulze@4602 | 461 | href="#effects"><code class=css><code |
dschulze@4602 | 462 | class=property>transform</code></code></a>’ and ‘<a |
dschulze@4602 | 463 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 464 | class=property>transform-origin</code></code></a>’ properties as |
dschulze@4602 | 465 | described <a href="#transformation-matrix-computation">below</a>.</p> |
simon@4365 | 466 | |
simon@4365 | 467 | <dt id=Term3DRenderingContext><dfn id=d-rendering-context>3D rendering |
simon@4365 | 468 | context</dfn> |
simon@4365 | 469 | |
simon@4365 | 470 | <dd> |
simon@4365 | 471 | <p> A containing block hierarchy of one or more levels, instantiated by |
dschulze@4602 | 472 | elements with a computed value for the ‘<a |
dschulze@4602 | 473 | href="#transform-style"><code class=css><code |
dschulze@4602 | 474 | class=property>transform-style</code></code></a>’ property of |
dschulze@4602 | 475 | ‘<code class=css><code class=css>preserve-3d</code></code>’, |
dschulze@4602 | 476 | whose elements share a common three-dimensional coordinate system.</p> |
simon@4345 | 477 | </dd> |
simon@4345 | 478 | <!-- Define "three-dimensional transform" ? --> |
dschulze@4323 | 479 | </dl> |
simon@4345 | 480 | <!-- ======================================================================================================= --> |
simon@4345 | 481 | |
simon@4345 | 482 | <h2 id=transform-rendering><span class=secno>5. </span>The Transform |
simon@4345 | 483 | Rendering Model</h2> |
simon@4345 | 484 | <!-- This section is normative --> |
simon@4345 | 485 | |
dschulze@4602 | 486 | <p> Specifying a value other than ‘<code class=css><code |
dschulze@4602 | 487 | class=css>none</code></code>’ for the ‘<a |
dschulze@4602 | 488 | href="#effects"><code class=css><code |
dschulze@4602 | 489 | class=property>transform</code></code></a>’ property establishes a |
dschulze@4602 | 490 | new <em>local coordinate system</em> at the element that it is applied to. |
dschulze@4602 | 491 | The mapping from where the element would have rendered into that local |
dschulze@4602 | 492 | coordinate system is given by the element's <a |
simon@4366 | 493 | href="#TermTransformationMatrix"><i>transformation matrix</i></a>. |
simon@4365 | 494 | Transformations are cumulative. That is, elements establish their local |
simon@4365 | 495 | coordinate system within the coordinate system of their parent. From the |
dschulze@4602 | 496 | perspective of the user, an element effectively accumulates all the |
dschulze@4602 | 497 | ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 498 | class=property>transform</code></code></a>’ properties of its |
dschulze@4602 | 499 | ancestors as well as any local transform applied to it. The accumulation |
dschulze@4602 | 500 | of these transforms defines a <em>current transformation matrix (CTM)</em> |
dschulze@4602 | 501 | for the element. |
simon@4345 | 502 | |
simon@4345 | 503 | <p> The coordinate space behaves as described in the <a |
simon@4345 | 504 | href="http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">coordinate |
simon@4345 | 505 | system transformations</a> section of the SVG 1.1 specification. This is a |
simon@4345 | 506 | coordinate system with two axes: the X axis increases horizontally to the |
simon@4345 | 507 | right; the Y axis increases vertically downwards. Three-dimensional |
simon@4345 | 508 | transform functions extent this coordinate space into three dimensions, |
simon@4345 | 509 | adding a Z axis perpendicular to the plane of the screen, that increases |
simon@4345 | 510 | towards the viewer. |
simon@4345 | 511 | |
simon@4453 | 512 | <p id=transformation-matrix-computation> The <a |
simon@4453 | 513 | href="#TermTransformationMatrix"><i>transformation matrix</i></a> is |
dschulze@4602 | 514 | computed from the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 515 | class=property>transform</code></code></a>’ and ‘<a |
dschulze@4602 | 516 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 517 | class=property>transform-origin</code></code></a>’ properties as |
dschulze@4602 | 518 | follows: |
simon@4366 | 519 | |
simon@4366 | 520 | <ol> |
simon@4366 | 521 | <li>Start with the identity matrix. |
simon@4366 | 522 | |
dschulze@4602 | 523 | <li>Translate by the computed X, Y and Z values of ‘<a |
dschulze@4602 | 524 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 525 | class=property>transform-origin</code></code></a>’ |
dschulze@4602 | 526 | |
dschulze@4602 | 527 | <li>Multiply by each of the transform functions in ‘<a |
dschulze@4602 | 528 | href="#effects"><code class=css><code |
dschulze@4602 | 529 | class=property>transform</code></code></a>’ property in turn |
dschulze@4602 | 530 | |
dschulze@4602 | 531 | <li>Translate by the negated computed X, Y and Z values of ‘<a |
dschulze@4602 | 532 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 533 | class=property>transform-origin</code></code></a>’ |
simon@4366 | 534 | </ol> |
simon@4366 | 535 | |
dschulze@4602 | 536 | <p> Transforms apply to <a class=term |
dschulze@4602 | 537 | href="#transformable-element">transformable elements</a>. |
simon@4358 | 538 | |
simon@4358 | 539 | <div class=example> |
simon@4358 | 540 | <pre> |
simon@4358 | 541 | div { |
simon@4358 | 542 | transform: translate(100px, 100px); |
simon@4358 | 543 | } |
simon@4358 | 544 | </pre> |
simon@4358 | 545 | |
simon@4358 | 546 | <p>This transform moves the element by 100 pixels in both the X and Y |
simon@4358 | 547 | directions.</p> |
simon@4358 | 548 | |
simon@4358 | 549 | <div class=figure> <img alt="The 100px translation in X and Y" |
simon@4358 | 550 | src=transform1.png></div> |
simon@4358 | 551 | </div> |
simon@4358 | 552 | |
simon@4358 | 553 | <div class=example> |
simon@4358 | 554 | <pre> |
simon@4358 | 555 | div { |
simon@4358 | 556 | height: 100px; width: 100px; |
simon@4358 | 557 | transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); |
simon@4358 | 558 | } |
simon@4358 | 559 | </pre> |
simon@4358 | 560 | |
simon@4363 | 561 | <p>This transform moves the element by 80 pixels in both the X and Y |
simon@4363 | 562 | directions, then scales the element by 150%, then rotates it 45° |
simon@4363 | 563 | clockwise about the Z axis. Note that the scale and rotation operate |
simon@4363 | 564 | about the center of the element, since the element has the default |
dschulze@4602 | 565 | transform-origin of ‘<code class=css><code class=css>50% |
dschulze@4602 | 566 | 50%</code></code>’.</p> |
simon@4358 | 567 | |
simon@4358 | 568 | <div class=figure> <img alt="The transform specified above" |
simon@4358 | 569 | src="compound_transform.png"></div> |
simon@4358 | 570 | |
simon@4358 | 571 | <p>Note that an identical rendering can be obtained by nesting elements |
simon@4358 | 572 | with the equivalent transforms: |
simon@4358 | 573 | |
simon@4358 | 574 | <pre> |
simon@4358 | 575 | <div style="transform: translate(80px, 80px)"> |
dschulze@4602 | 576 | <div style="transform: scale(1.5, 1.5)"> |
dschulze@4602 | 577 | <div style="transform: rotate(45deg)"></div> |
dschulze@4602 | 578 | </div> |
simon@4358 | 579 | </div> |
simon@4358 | 580 | </pre> |
simon@4358 | 581 | </div> |
simon@4345 | 582 | <!-- This "in the HTML namespace" is awkward. Is there a better way? --> |
simon@4345 | 583 | |
simon@4345 | 584 | <p> In the HTML namespace, the transform property does not affect the flow |
simon@4363 | 585 | of the content surrounding the transformed element. However, the extent of |
simon@4345 | 586 | the overflow area takes into account transformed elements. This behavior |
simon@4363 | 587 | is similar to what happens when elements are offset via relative |
dschulze@4602 | 588 | positioning. Therefore, if the value of the ‘<code class=css><code |
dschulze@4602 | 589 | class=property>overflow</code></code>’ property is ‘<code |
dschulze@4602 | 590 | class=css><code class=css>scroll</code></code>’ or ‘<code |
dschulze@4602 | 591 | class=css><code class=css>auto</code></code>’, scrollbars will |
dschulze@4602 | 592 | appear as needed to see content that is transformed outside the visible |
dschulze@4602 | 593 | area. |
simon@4345 | 594 | |
simon@4345 | 595 | <p> In the HTML namespace, any value other than ‘<code |
dschulze@4602 | 596 | class=css><code class=css>none</code></code>’ for the transform |
dschulze@4602 | 597 | results in the creation of both a stacking context and a containing block. |
dschulze@4602 | 598 | The object acts as a containing block for fixed positioned descendants. |
simon@4345 | 599 | |
simon@4345 | 600 | <p class=issue> Is this affect on position:fixed necessary? If so, need to |
simon@4345 | 601 | go into more detail here about why fixed positioned objects should do |
simon@4345 | 602 | this, i.e., that it's much harder to implement otherwise. |
simon@4345 | 603 | |
simon@4345 | 604 | <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform |
simon@4345 | 605 | Rendering</h3> |
simon@4345 | 606 | <!-- Maybe define "tranform container" in the definitions, and use it everywhere |
simon@4345 | 607 | in place of "containing block"? I'm not sure if "containing block" is exactly right. --> |
simon@4345 | 608 | |
simon@4345 | 609 | <p> Normally, elements render as flat planes, and are rendered into the |
simon@4345 | 610 | same plane as their containing block. Often this is the plane shared by |
simon@4345 | 611 | the rest of the page. Two-dimensional transform functions can alter the |
simon@4345 | 612 | appearance of an element, but that element is still rendered into the same |
simon@4363 | 613 | plane as its containing block. |
simon@4345 | 614 | |
simon@4345 | 615 | <p> Three-dimensional transforms can result in transformation matrices with |
simon@4345 | 616 | a non-zero Z component<!-- clarify -->, potentially lifting them off the |
simon@4345 | 617 | plane of their containing block. Because of this, elements with |
simon@4345 | 618 | three-dimensional transformations could potentially render in an |
simon@4345 | 619 | front-to-back order that different from the normal CSS rendering order, |
simon@4345 | 620 | and intersect with each other. Whether they do so depends on whether the |
simon@4365 | 621 | element is a member of a <a class=term href="#d-rendering-context">3D |
simon@4365 | 622 | rendering context</a>, as described below. |
simon@4345 | 623 | |
simon@4366 | 624 | <div class=issue> |
simon@4345 | 625 | <p class=desc>This description does not exactly match what WebKit |
simon@4345 | 626 | implements. Perhaps it should be changed to match current |
simon@4345 | 627 | implementations?</p> |
simon@4345 | 628 | </div> |
simon@4345 | 629 | |
simon@4366 | 630 | <div class=example> |
simon@4366 | 631 | <p>This example shows the effect of three-dimensional transform applied to |
simon@4366 | 632 | an element.</p> |
simon@4366 | 633 | |
simon@4366 | 634 | <pre> |
simon@4366 | 635 | <style> |
dschulze@4602 | 636 | div { |
dschulze@4602 | 637 | height: 150px; |
dschulze@4602 | 638 | width: 150px; |
dschulze@4602 | 639 | } |
dschulze@4602 | 640 | .container { |
dschulze@4602 | 641 | border: 1px solid black; |
dschulze@4602 | 642 | } |
dschulze@4602 | 643 | .transformed { |
dschulze@4602 | 644 | transform: rotateY(50deg); |
dschulze@4602 | 645 | } |
simon@4366 | 646 | </style> |
simon@4366 | 647 | |
simon@4366 | 648 | <div class="container"> |
simon@4366 | 649 | <div class="transformed"></div> |
simon@4366 | 650 | </div> |
simon@4366 | 651 | </pre> |
simon@4366 | 652 | |
simon@4366 | 653 | <div class=figure> <img alt="Div with a rotateY transform." height=190 |
simon@4366 | 654 | src="examples/simple-3d-example.png" width=210></div> |
simon@4366 | 655 | |
simon@4366 | 656 | <p>The transform is a 50° rotation about the vertical, Y axis. Note |
simon@4366 | 657 | how this makes the blue box appear narrower, but not three-dimensional.</p> |
simon@4366 | 658 | </div> |
simon@4366 | 659 | |
dschulze@4602 | 660 | <p> The ‘<a href="#perspective"><code class=css><code |
dschulze@4602 | 661 | class=property>perspective</code></code></a>’ and ‘<a |
dschulze@4602 | 662 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 663 | class=property>perspective-origin</code></code></a>’ properties can |
dschulze@4602 | 664 | be used to add a feeling of depth to a scene by making elements higher on |
dschulze@4602 | 665 | the Z axis (closer to the viewer) appear larger, and those further away to |
dschulze@4602 | 666 | appear smaller. |
simon@4366 | 667 | |
simon@4453 | 668 | <p id=perspective-matrix-computation> The <a |
simon@4453 | 669 | href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as |
simon@4453 | 670 | follows: <!-- Make this more mathy, with matrices? --> |
simon@4366 | 671 | |
simon@4366 | 672 | <ol> |
simon@4366 | 673 | <li>Start with the identity matrix. |
simon@4366 | 674 | |
dschulze@4602 | 675 | <li>Translate by the computed X and Y values of ‘<a |
dschulze@4602 | 676 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 677 | class=property>perspective-origin</code></code></a>’ |
dschulze@4602 | 678 | |
dschulze@4602 | 679 | <li>Multiply by the matrix that would be obtained from the ‘<code |
dschulze@4602 | 680 | class=css><a href="#perspective-function"><code |
dschulze@4602 | 681 | class=css>perspective(<length>)</code></a></code>’ transform |
dschulze@4602 | 682 | function, where the length is provided by the value of the ‘<a |
dschulze@4602 | 683 | href="#perspective"><code class=css><code |
dschulze@4602 | 684 | class=property>perspective</code></code></a>’ property |
dschulze@4602 | 685 | |
dschulze@4602 | 686 | <li>Translate by the negated computed X and Y values of ‘<a |
dschulze@4602 | 687 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 688 | class=property>perspective-origin</code></code></a>’ |
simon@4366 | 689 | </ol> |
simon@4366 | 690 | |
simon@4366 | 691 | <div class=example> |
simon@4366 | 692 | <p>This example shows how perspective can be used to cause |
simon@4366 | 693 | three-dimensional transforms to appear more realistic.</p> |
simon@4366 | 694 | |
simon@4366 | 695 | <pre> |
simon@4366 | 696 | <style> |
dschulze@4602 | 697 | div { |
dschulze@4602 | 698 | height: 150px; |
dschulze@4602 | 699 | width: 150px; |
dschulze@4602 | 700 | } |
dschulze@4602 | 701 | .container { |
dschulze@4602 | 702 | perspective: 500px; |
dschulze@4602 | 703 | border: 1px solid black; |
dschulze@4602 | 704 | } |
dschulze@4602 | 705 | .transformed { |
dschulze@4602 | 706 | transform: rotateY(50deg); |
dschulze@4602 | 707 | } |
simon@4366 | 708 | </style> |
simon@4366 | 709 | |
simon@4366 | 710 | <div class="container"> |
simon@4366 | 711 | <div class="transformed"></div> |
simon@4366 | 712 | </div> |
simon@4366 | 713 | </pre> |
simon@4366 | 714 | |
simon@4366 | 715 | <div class=figure> <img |
simon@4366 | 716 | alt="Div with a rotateY transform, and perspective on its container" |
simon@4366 | 717 | height=190 src="examples/simple-perspective-example.png" width=210></div> |
simon@4366 | 718 | |
simon@4366 | 719 | <p>The inner element has the same transform as in the previous example, |
simon@4366 | 720 | but its rendering is now influenced by the perspective property on its |
simon@4366 | 721 | parent element. Perspective causes vertices that have positive Z |
simon@4366 | 722 | coordinates (closer to the viewer) to be scaled up in X and Y, and those |
dschulze@4602 | 723 | further away (negative Z coordinates) to be scaled down, giving an |
simon@4366 | 724 | appearance of depth.</p> |
simon@4366 | 725 | </div> |
simon@4366 | 726 | |
simon@4345 | 727 | <p> An element with a three-dimensional transform that is not contained in |
simon@4365 | 728 | a <a class=term href="#d-rendering-context">3D rendering context</a> |
simon@4365 | 729 | renders with the appropriate transform applied, but does not intersect |
simon@4365 | 730 | with any other elements. The three-dimensional transform in this case can |
simon@4365 | 731 | be considered just as a painting effect, like two-dimensional transforms. |
simon@4365 | 732 | Similarly, the transform does not affect painting order. For example, a |
simon@4365 | 733 | transform with a positive Z translation may make an element look larger, |
simon@4365 | 734 | but does not cause that element to render in front of elements with no |
simon@4365 | 735 | translation in Z. |
simon@4345 | 736 | |
simon@4365 | 737 | <p> An element with a three-dimensional transform that is contained in a <a |
simon@4365 | 738 | class=term href="#d-rendering-context">3D rendering context</a> can |
simon@4365 | 739 | visibly interact with other elements in that same 3D rendering context; |
simon@4365 | 740 | the set of elements participating in the same <a class=term |
simon@4365 | 741 | href="#d-rendering-context">3D rendering context</a> may obscure each |
simon@4365 | 742 | other or intersect, based on their computed transforms. They are rendered |
simon@4365 | 743 | as if they are all siblings, positioned in a common 3D coordinate space. |
simon@4365 | 744 | The position of each element in that three-dimensional space is determined |
simon@4365 | 745 | by accumulating the transformation matrices up from the element that |
simon@4365 | 746 | establishes the <a class=term href="#d-rendering-context">3D rendering |
simon@4365 | 747 | context</a> through each element that is a containing block for the given |
simon@4365 | 748 | element, as described below. |
simon@4345 | 749 | <!-- More detail required, probably with matrices --> |
simon@4345 | 750 | |
simon@4366 | 751 | <div class=example> |
simon@4366 | 752 | <pre> |
simon@4366 | 753 | <style> |
dschulze@4602 | 754 | div { |
dschulze@4602 | 755 | height: 150px; |
dschulze@4602 | 756 | width: 150px; |
dschulze@4602 | 757 | } |
dschulze@4602 | 758 | .container { |
dschulze@4602 | 759 | perspective: 500px; |
dschulze@4602 | 760 | border: 1px solid black; |
dschulze@4602 | 761 | } |
dschulze@4602 | 762 | .transformed { |
dschulze@4602 | 763 | transform: rotateY(50deg); |
dschulze@4602 | 764 | background-color: blue; |
dschulze@4602 | 765 | } |
dschulze@4602 | 766 | .child { |
dschulze@4602 | 767 | transform-origin: top left; |
dschulze@4602 | 768 | transform: rotateX(40deg); |
dschulze@4602 | 769 | background-color: lime; |
dschulze@4602 | 770 | } |
simon@4366 | 771 | </style> |
simon@4366 | 772 | |
simon@4366 | 773 | <div class="container"> |
dschulze@4602 | 774 | <div class="transformed"> |
dschulze@4602 | 775 | <div class="child"></div> |
dschulze@4602 | 776 | </div> |
simon@4366 | 777 | </div> |
simon@4366 | 778 | </pre> |
simon@4366 | 779 | |
dschulze@4602 | 780 | <p>This example shows how nested 3D transforms are rendered in the absence |
dschulze@4602 | 781 | of ‘<code class=css><code class=css>transform-style: |
dschulze@4602 | 782 | preserve-3d</code></code>’. The blue div is transformed as in the |
dschulze@4602 | 783 | previous example, with its rendering influenced by the perspective on its |
dschulze@4602 | 784 | parent element. The lime element also has a 3D transform, which is a |
dschulze@4602 | 785 | rotation about the X axis (anchored at the top, by virtue of the |
dschulze@4602 | 786 | transform-origin). However, the lime element is being rendered into the |
dschulze@4602 | 787 | plane of its parent because it is not a member of a 3D rendering context; |
dschulze@4602 | 788 | the parent is "flattening".</p> |
simon@4366 | 789 | |
simon@4366 | 790 | <div class=figure> <img alt="Nested 3D transforms, with flattening" |
simon@4366 | 791 | height=200 src="examples/3d-rendering-context-flat.png" width=240></div> |
simon@4366 | 792 | </div> |
simon@4366 | 793 | |
simon@4365 | 794 | <p>Elements establish and participate in 3D rendering contexts as follows: |
simon@4365 | 795 | |
simon@4365 | 796 | <ul> |
simon@4365 | 797 | <li> A <a class=term href="#d-rendering-context">3D rendering context</a> |
dschulze@4602 | 798 | is established by a a <a class=term |
dschulze@4602 | 799 | href="#transformable-element">transformable element</a> whose computed |
dschulze@4602 | 800 | value for ‘<a href="#transform-style"><code class=css><code |
dschulze@4602 | 801 | class=property>transform-style</code></code></a>’ is ‘<code |
dschulze@4602 | 802 | class=css><code class=css>preserve-3d</code></code>’, and which |
dschulze@4602 | 803 | itself is not part of a 3D rendering context. Note that such an element |
dschulze@4602 | 804 | is always a containing block. An element that establishes a 3D rendering |
dschulze@4602 | 805 | context also participates in that context. |
dschulze@4602 | 806 | |
dschulze@4602 | 807 | <li> An element whose computed value for ‘<a |
dschulze@4602 | 808 | href="#transform-style"><code class=css><code |
dschulze@4602 | 809 | class=property>transform-style</code></code></a>’ is ‘<code |
dschulze@4602 | 810 | class=css><code class=css>preserve-3d</code></code>’, and which |
dschulze@4602 | 811 | itself participates in a <a class=term href="#d-rendering-context">3D |
dschulze@4602 | 812 | rendering context</a>, extends that 3D rendering context rather than |
dschulze@4602 | 813 | establishing a new one. |
simon@4365 | 814 | |
simon@4365 | 815 | <li> An element participates in a <a class=term |
simon@4365 | 816 | href="#d-rendering-context">3D rendering context</a> if its containing |
simon@4365 | 817 | block establishes or extends a <a class=term |
simon@4365 | 818 | href="#d-rendering-context">3D rendering context</a>. |
simon@4365 | 819 | </ul> |
simon@4365 | 820 | |
simon@4365 | 821 | <p> The final value of the transform used to render an element in a <a |
simon@4365 | 822 | class=term href="#d-rendering-context">3D rendering context</a> is |
simon@4366 | 823 | computed by accumulating a matrix as follows: |
simon@4366 | 824 | |
simon@4366 | 825 | <ol> |
simon@4366 | 826 | <li>Start with the identity matrix |
simon@4365 | 827 | |
simon@4365 | 828 | <li>For each containing block between the root of the <a class=term |
simon@4365 | 829 | href="#d-rendering-context">3D rendering context</a> and the element in |
simon@4366 | 830 | question: |
simon@4345 | 831 | <ol> |
simon@4366 | 832 | <li>multiply the accumulated matrix with the <a |
simon@4366 | 833 | href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> on the |
simon@4366 | 834 | element's containing block (if any). That contining block is not |
simon@4366 | 835 | necessarily a member of the 3D rendering context. |
simon@4366 | 836 | |
simon@4366 | 837 | <li>apply to the accumulated matrix a translation equivalent to the |
simon@4366 | 838 | horizontal and vertical offset of the element relative to its |
simon@4366 | 839 | containing block as specified by the CSS visual formatting model. |
simon@4366 | 840 | <!-- (tighten this!) --> |
simon@4366 | 841 | |
simon@4366 | 842 | <li>multiply the accumulated matrix with the <a |
simon@4366 | 843 | href="#TermTransformationMatrix"><i>transformation matrix</i></a>. |
simon@4345 | 844 | </ol> |
simon@4345 | 845 | </ol> |
simon@4363 | 846 | |
simon@4345 | 847 | <div class=example> |
simon@4345 | 848 | <pre> |
simon@4364 | 849 | <style> |
dschulze@4602 | 850 | div { |
dschulze@4602 | 851 | height: 150px; |
dschulze@4602 | 852 | width: 150px; |
dschulze@4602 | 853 | } |
dschulze@4602 | 854 | .container { |
dschulze@4602 | 855 | perspective: 500px; |
dschulze@4602 | 856 | border: 1px solid black; |
dschulze@4602 | 857 | } |
dschulze@4602 | 858 | .transformed { |
dschulze@4602 | 859 | <b>transform-style: preserve-3d</b>; |
dschulze@4602 | 860 | transform: rotateY(50deg); |
dschulze@4602 | 861 | background-color: blue; |
dschulze@4602 | 862 | } |
dschulze@4602 | 863 | .child { |
dschulze@4602 | 864 | transform-origin: top left; |
dschulze@4602 | 865 | transform: rotateX(40deg); |
dschulze@4602 | 866 | background-color: lime; |
dschulze@4602 | 867 | } |
simon@4364 | 868 | </style> |
simon@4345 | 869 | </pre> |
simon@4345 | 870 | |
simon@4364 | 871 | <p>This example is identical to the previous example, with the addition of |
dschulze@4602 | 872 | ‘<code class=css><code class=css>transform-style: |
dschulze@4602 | 873 | preserve-3d</code></code>’ on the blue element. The blue element |
dschulze@4602 | 874 | now establishes a 3D rendering context, of which the lime element is a |
dschulze@4602 | 875 | member. Now both blue and lime elements share a common three-dimensional |
dschulze@4602 | 876 | space, so the lime element renders as tilting out from its parent, |
dschulze@4602 | 877 | influenced by the perspective on the container.</p> |
simon@4364 | 878 | |
simon@4364 | 879 | <div class=figure> <img alt="Nested 3D transforms, with preserve-3d." |
simon@4364 | 880 | height=200 src="examples/3d-rendering-context-3d.png" width=240></div> |
simon@4345 | 881 | </div> |
simon@4345 | 882 | |
simon@4366 | 883 | <p> Elements in the same <a class=term href="#d-rendering-context">3D |
simon@4701 | 884 | rendering context</a> may intersect with each other. User agents must |
simon@4702 | 885 | render intersection by subdividing the planes of intersecting elements as |
simon@4701 | 886 | described by <a |
simon@4366 | 887 | href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's |
simon@4701 | 888 | algorithm</a>. |
simon@4366 | 889 | |
simon@4366 | 890 | <p> Untransformed elements in a <a class=term |
simon@4366 | 891 | href="#d-rendering-context">3D rendering context</a> render on the Z=0 |
simon@4366 | 892 | plane, yet may still intersect with transformed elements. |
simon@4366 | 893 | |
simon@4366 | 894 | <p> Within a <a class=term href="#d-rendering-context">3D rendering |
simon@4366 | 895 | context</a>, the rendering order of non-intersecting elements is based on |
simon@4366 | 896 | their position on the Z axis after the application of the accumulated |
simon@4366 | 897 | transform. Elements at the same Z position render in <a |
simon@4366 | 898 | href="http://www.w3.org/TR/CSS2/zindex.html#painting-order">stacking |
simon@4366 | 899 | context order</a>. |
simon@4366 | 900 | |
simon@4345 | 901 | <div class=example> |
simon@4345 | 902 | <pre> |
simon@4364 | 903 | <style> |
simon@4364 | 904 | .container { |
simon@4364 | 905 | background-color: rgba(0, 0, 0, 0.3); |
simon@4364 | 906 | transform-style: preserve-3d; |
simon@4364 | 907 | perspective: 500px; |
simon@4364 | 908 | } |
simon@4364 | 909 | .container > div { |
simon@4364 | 910 | position: absolute; |
simon@4364 | 911 | left: 0; |
simon@4364 | 912 | } |
simon@4364 | 913 | .container > :first-child { |
simon@4364 | 914 | transform: rotateY(45deg); |
simon@4364 | 915 | background-color: orange; |
simon@4364 | 916 | top: 10px; |
simon@4364 | 917 | height: 135px; |
simon@4364 | 918 | } |
simon@4364 | 919 | .container > :last-child { |
simon@4364 | 920 | transform: translateZ(40px); |
simon@4364 | 921 | background-color: rgba(0, 0, 255, 0.75); |
simon@4364 | 922 | top: 50px; |
simon@4364 | 923 | height: 100px; |
simon@4364 | 924 | } |
simon@4364 | 925 | </style> |
simon@4364 | 926 | |
simon@4364 | 927 | <div class="container"> |
simon@4364 | 928 | <div></div> |
simon@4364 | 929 | <div></div> |
simon@4364 | 930 | </div> |
simon@4345 | 931 | </pre> |
simon@4345 | 932 | |
simon@4364 | 933 | <p> This example shows show elements in a 3D rendering context can |
simon@4364 | 934 | intersect. The container element establishes a 3D rendering context for |
simon@4364 | 935 | itself and its two children. The children intersect with eachother, and |
simon@4364 | 936 | the orange element also intersects with the container.</p> |
simon@4364 | 937 | |
simon@4364 | 938 | <div class=figure> <img alt="Intersecting sibling elements." height=200 |
simon@4364 | 939 | src="examples/3d-intersection.png" width=200></div> |
simon@4345 | 940 | </div> |
simon@4367 | 941 | |
simon@4367 | 942 | <p> Using three-dimensional transforms, it's possible to transform an |
simon@4367 | 943 | element such that its reverse side is towards the viewer. 3D-tranformed |
simon@4367 | 944 | elements show the same content on both sides, so the reverse side looks |
simon@4701 | 945 | like a mirror-image of the front side (as if the element were projected |
simon@4701 | 946 | onto a sheet of glass). Normally, elements whose reverse side is towards |
simon@4701 | 947 | the viewer remain visible. However, the ‘<a |
dschulze@4602 | 948 | href="#backface-visibility"><code class=css><code |
dschulze@4602 | 949 | class=property>backface-visibility</code></code></a>’ property |
dschulze@4602 | 950 | allows the author to make an element invisible when its reverse side is |
dschulze@4602 | 951 | towards the viewer. This behavior is "live"; if an element with |
dschulze@4602 | 952 | ‘<code class=css><code class=css>backface-visibility: |
dschulze@4602 | 953 | hidden</code></code>’ were animating, such that its front and |
dschulze@4602 | 954 | reverse sides were alternately visible, then it would only be visible when |
dschulze@4602 | 955 | the front side were towards the viewer.</p> |
simon@4345 | 956 | <!-- ======================================================================================================= --> |
simon@4345 | 957 | |
dschulze@4602 | 958 | <h2 id=transform-property><span class=secno>6. </span> The ‘<a |
dschulze@4602 | 959 | href="#effects"><code class=css><code |
dschulze@4602 | 960 | class=property>transform</code></code></a>’ Property</h2> |
vhardy@3672 | 961 | |
simon@4345 | 962 | <p> A transformation is applied to the coordinate system an element renders |
dschulze@4602 | 963 | in through the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 964 | class=property>transform</code></code></a>’ property. This property |
dschulze@4602 | 965 | contains a list of <a href="#transform-functions">transform functions</a>. |
dschulze@4602 | 966 | The final transformation value for a coordinate system is obtained by |
dschulze@4602 | 967 | converting each function in the list to its corresponding matrix like |
dschulze@4602 | 968 | defined in <a href="#mathematical-description">Mathematical Description of |
dschulze@4511 | 969 | Transformation Functions</a>, then multiplying the matrices. |
vhardy@3672 | 970 | |
vhardy@3672 | 971 | <table class=propdef> |
vhardy@3672 | 972 | <tbody> |
vhardy@3672 | 973 | <tr> |
vhardy@3672 | 974 | <td> <em>Name:</em> |
vhardy@3672 | 975 | |
vhardy@3672 | 976 | <td> <dfn id=effects>transform</dfn> |
vhardy@3672 | 977 | |
vhardy@3672 | 978 | <tr> |
vhardy@3672 | 979 | <td> <em>Value:</em> |
vhardy@3672 | 980 | |
vhardy@3672 | 981 | <td> none | <transform-function> [ <transform-function> ]* |
vhardy@3672 | 982 | |
vhardy@3672 | 983 | <tr> |
vhardy@3672 | 984 | <td> <em>Initial:</em> |
vhardy@3672 | 985 | |
vhardy@3672 | 986 | <td> none |
vhardy@3672 | 987 | |
vhardy@3672 | 988 | <tr> |
vhardy@3672 | 989 | <td> <em>Applies to:</em> |
vhardy@3672 | 990 | |
dschulze@4323 | 991 | <td> <a href="#TermTransformableElement">transformable elements</a> |
vhardy@3672 | 992 | |
vhardy@3672 | 993 | <tr> |
vhardy@3672 | 994 | <td> <em>Inherited:</em> |
vhardy@3672 | 995 | |
vhardy@3672 | 996 | <td> no |
vhardy@3672 | 997 | |
vhardy@3672 | 998 | <tr> |
vhardy@3672 | 999 | <td> <em>Percentages:</em> |
vhardy@3672 | 1000 | |
dschulze@4483 | 1001 | <td> refer to the size of the element's bounding box |
vhardy@3672 | 1002 | |
vhardy@3672 | 1003 | <tr> |
vhardy@3672 | 1004 | <td> <em>Media:</em> |
vhardy@3672 | 1005 | |
vhardy@3672 | 1006 | <td> visual |
vhardy@3672 | 1007 | |
vhardy@3672 | 1008 | <tr> |
vhardy@3672 | 1009 | <td> <em>Computed value:</em> |
vhardy@3672 | 1010 | |
simon@4345 | 1011 | <td> See below. |
vhardy@3672 | 1012 | </table> |
simon@4345 | 1013 | |
simon@4366 | 1014 | <div class=issue> |
simon@4345 | 1015 | <p class=desc>We need to resolve whether the computed value is the same as |
simon@4345 | 1016 | the specified value, or matrix().</p> |
simon@4345 | 1017 | </div> |
simon@4345 | 1018 | |
simon@4345 | 1019 | <p>The computed value of the transform property is a matrix() or matrix3d() |
simon@4345 | 1020 | value that describes the matrix that results from concatenating the |
simon@4345 | 1021 | individual transform functions. If the resulting matrix can be represented |
simon@4345 | 1022 | as a two-dimensional matrix with no loss of information, then a matrix() |
simon@4345 | 1023 | value is returned, otherwise a matrix3d() value. For elements with no |
simon@4345 | 1024 | transform applied, the computed value is ‘<code |
simon@4363 | 1025 | class=property>none</code>’. |
simon@4363 | 1026 | |
dschulze@4602 | 1027 | <p>Any value other than ‘<code class=css><code |
dschulze@4602 | 1028 | class=css>none</code></code>’ for the transform results in the |
dschulze@4602 | 1029 | creation of both a stacking context and a containing block. The object |
dschulze@4602 | 1030 | acts as a containing block for fixed positioned descendants.</p> |
vhardy@3672 | 1031 | <!-- ======================================================================================================= --> |
vhardy@3672 | 1032 | |
dschulze@4598 | 1033 | <h2 id=svg-transform><span class=secno>7. </span> The SVG ‘<a |
dschulze@4602 | 1034 | href="#effects"><code class=css><code |
dschulze@4602 | 1035 | class=property>transform</code></code></a>’ Attribute</h2> |
dschulze@4598 | 1036 | |
dschulze@4598 | 1037 | <p> The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1 |
dschulze@4598 | 1038 | specification</a> did not specify the attributes ‘<a |
dschulze@4602 | 1039 | href="#effects"><code class=css><code |
dschulze@4602 | 1040 | class=property>transform</code></code></a>’, ‘<code |
dschulze@4602 | 1041 | class=property>gradientTransform</code>’ or ‘<code |
dschulze@4602 | 1042 | class=property>patternTransform</code>’ as <a |
dschulze@4602 | 1043 | href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes"><em>presentation |
dschulze@4602 | 1044 | attributes</em></a>. In order to improve the integration of SVG and HTML, |
dschulze@4602 | 1045 | this specification makes these SVG attributes to ‘<code |
dschulze@4598 | 1046 | class=css>presentation attributes</code>’ and makes the ‘<a |
dschulze@4602 | 1047 | href="#effects"><code class=css><code |
dschulze@4602 | 1048 | class=property>transform</code></code></a>’ property one that |
dschulze@4602 | 1049 | applies to <a class=term href="#transformable-element">transformable |
dschulze@4602 | 1050 | elements</a> in the SVG namespace. |
dschulze@4598 | 1051 | |
dschulze@4598 | 1052 | <p> This specification will also introduce the new presentation attributes |
dschulze@4602 | 1053 | ‘<a href="#transform-origin"><code class=css><code |
dschulze@4602 | 1054 | class=property>transform-origin</code></code></a>’, ‘<a |
dschulze@4602 | 1055 | href="#perspective"><code class=css><code |
dschulze@4602 | 1056 | class=property>perspective</code></code></a>’, ‘<a |
dschulze@4602 | 1057 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 1058 | class=property>perspective-origin</code></code></a>’, ‘<a |
dschulze@4602 | 1059 | href="#transform-style"><code class=css><code |
dschulze@4602 | 1060 | class=property>transform-style</code></code></a>’ and ‘<a |
dschulze@4602 | 1061 | href="#backface-visibility"><code class=css><code |
dschulze@4602 | 1062 | class=property>backface-visibility</code></code></a>’ in the SVG |
dschulze@4602 | 1063 | namespace. All new introduced presentation attributes are animateable. |
dschulze@4598 | 1064 | |
dschulze@4598 | 1065 | <h3 id=transform-attribute-specificity><span class=secno>7.1. </span>SVG |
dschulze@4602 | 1066 | ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1067 | class=property>transform</code></code></a>’ attribute specificity</h3> |
dschulze@4598 | 1068 | |
dschulze@4598 | 1069 | <p>Since the previously named SVG attributes become presentation |
dschulze@4598 | 1070 | attributes, their participation to the CSS cascade is determined by the |
dschulze@4598 | 1071 | specificity of presentation attributes, as <a |
vhardy@3672 | 1072 | href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">explained</a> |
vhardy@3672 | 1073 | in the SVG specification. |
vhardy@3672 | 1074 | |
dschulze@4598 | 1075 | <div class=example> |
dschulze@4602 | 1076 | <p> This example shows the combination of the ‘<a |
dschulze@4602 | 1077 | href="#effects"><code class=css><code |
dschulze@4602 | 1078 | class=property>transform</code></code></a>’ style property and the |
dschulze@4602 | 1079 | ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1080 | class=property>transform</code></code></a>’ presentation attribute. |
dschulze@4602 | 1081 | </p> |
dschulze@4598 | 1082 | |
dschulze@4598 | 1083 | <pre><svg> |
dschulze@4598 | 1084 | <style> |
dschulze@4598 | 1085 | .container { |
dschulze@4598 | 1086 | transform: translate(100px, 100px); |
dschulze@4598 | 1087 | } |
dschulze@4598 | 1088 | </style> |
dschulze@4598 | 1089 | |
dschulze@4598 | 1090 | <g class="container" transform="translate (200 200)"> |
dschulze@4598 | 1091 | <rect width="100" height="100" fill="blue" /> |
dschulze@4598 | 1092 | </g> |
dschulze@4598 | 1093 | </svg></pre> |
dschulze@4598 | 1094 | |
dschulze@4598 | 1095 | <div class=figure> <img alt="Translated SVG container element." height=200 |
dschulze@4598 | 1096 | src="examples/svg-translate.png" width=200></div> |
dschulze@4598 | 1097 | |
dschulze@4602 | 1098 | <p> Because of the participation to the CSS cascade, the ‘<a |
dschulze@4602 | 1099 | href="#effects"><code class=css><code |
dschulze@4602 | 1100 | class=property>transform</code></code></a>’ style property |
dschulze@4602 | 1101 | overrides the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1102 | class=property>transform</code></code></a>’ presentation attribute. |
dschulze@4602 | 1103 | Therefore the container gets translated by ‘<code class=css><code |
dschulze@4602 | 1104 | class=css>100px</code></code>’ in horizontal and vertical |
dschulze@4602 | 1105 | direction, instead of ‘<code class=css><code |
dschulze@4602 | 1106 | class=css>200px</code></code>’.</p> |
dschulze@4598 | 1107 | </div> |
dschulze@4598 | 1108 | |
dschulze@4601 | 1109 | <h3 id=svg-syntax><span class=secno>7.2. </span>Syntax of the SVG ‘<a |
dschulze@4602 | 1110 | href="#effects"><code class=css><code |
dschulze@4602 | 1111 | class=property>transform</code></code></a>’ attribute</h3> |
dschulze@4598 | 1112 | |
dschulze@4598 | 1113 | <p> To provide backward compatibility, the syntax of the ‘<a |
dschulze@4602 | 1114 | href="#effects"><code class=css><code |
dschulze@4602 | 1115 | class=property>transform</code></code></a>’ presentation attribute |
dschulze@4602 | 1116 | differs from the syntax of the ‘<a href="#effects"><code |
dschulze@4602 | 1117 | class=css><code class=property>transform</code></code></a>’ style |
dschulze@4598 | 1118 | property like shown in the example above. However, the syntax used for the |
dschulze@4602 | 1119 | ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1120 | class=property>transform</code></code></a>’ style property can be |
dschulze@4602 | 1121 | used for a ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1122 | class=property>transform</code></code></a>’ presentation attribute |
dschulze@4602 | 1123 | value. Authors are advised to follow the rules of <a |
dschulze@4598 | 1124 | href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values |
dschulze@4602 | 1125 | and Units Module</a>. Therefore an author should write ‘<code |
dschulze@4602 | 1126 | class=css><code class=css>transform="translate(200px, |
dschulze@4602 | 1127 | 200px)"</code></code>’ instead of ‘<code class=css><code |
dschulze@4602 | 1128 | class=css>transform="translate (200 200)"</code></code>’ because the |
dschulze@4602 | 1129 | second example with the spaces before the ‘<code class=css><code |
dschulze@4602 | 1130 | class=css>(</code></code>’, the missing comma between the arguments |
dschulze@4602 | 1131 | and the values without the explicit unit notation would be valid for the |
dschulze@4602 | 1132 | attribute only. |
dschulze@4598 | 1133 | |
dschulze@4598 | 1134 | <h4 id=svg-transform-list><span class=secno>7.2.1. </span>Transform List</h4> |
dschulze@4598 | 1135 | |
dschulze@4602 | 1136 | <p> The value for the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1137 | class=property>transform</code></code></a>’ attribute consists of a |
dschulze@4601 | 1138 | transform list with zero or more transform functions in the <a |
dschulze@4598 | 1139 | href="#svg-functional-notation">functional notation</a>. If the transform |
dschulze@4601 | 1140 | list consists of more than one transform function, these functions are |
dschulze@4602 | 1141 | separated by either a comma (‘<code class=css>,</code>’) with optional |
dschulze@4602 | 1142 | whitespace before and after the comma or one or more whitespaces. The |
dschulze@4602 | 1143 | transform list can have optional whitespaces before and after the list. |
dschulze@4598 | 1144 | |
dschulze@4598 | 1145 | <h4 id=svg-functional-notation><span class=secno>7.2.2. </span>Functional |
dschulze@4598 | 1146 | Notations</h4> |
dschulze@4598 | 1147 | |
dschulze@4598 | 1148 | <p> The syntax starts with the name of the function followed by optional |
dschulze@4598 | 1149 | whitespaces followed by a left parenthesis followed by optional whitespace |
dschulze@4598 | 1150 | followed by the argument(s) to the notation followed by optional |
dschulze@4598 | 1151 | whitespace followed by a right parenthesis. If a function takes more than |
dschulze@4602 | 1152 | one argument, the arguments are either separated by a comma (‘<code |
dschulze@4602 | 1153 | class=css>,</code>’) with optional whitespace before and after the comma |
dschulze@4602 | 1154 | or one or more whitespaces. |
dschulze@4598 | 1155 | |
dschulze@4598 | 1156 | <h4 id=svg-data-types><span class=secno>7.2.3. </span>SVG Data Types</h4> |
dschulze@4598 | 1157 | |
dschulze@4601 | 1158 | <p> Arguments of transform functions consists of data types in the sense of |
dschulze@4601 | 1159 | <a href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values |
dschulze@4598 | 1160 | and Units Module</a>. The definitions of data types in CSS Values and |
dschulze@4598 | 1161 | Units Module gets enhanced as follows: |
dschulze@4598 | 1162 | |
dschulze@4598 | 1163 | <h5 id=svg-transform-value><span class=secno>7.2.3.1. </span>The |
dschulze@4602 | 1164 | <var><translation-value></var> and <var><length></var> type</h5> |
dschulze@4602 | 1165 | |
dschulze@4602 | 1166 | <p> A translation-value or length can be a <var><number></var> |
dschulze@4602 | 1167 | without an unit identifier. In this case the <a |
dschulze@4602 | 1168 | href="#svg-number"><var>number</var></a> gets interpreted as "user unit". |
dschulze@4602 | 1169 | A user unit in the the <a |
dschulze@4598 | 1170 | href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem">initial |
dschulze@4598 | 1171 | coordinate system</a> is equivalenced to the parent environment's notion |
dschulze@4602 | 1172 | of a pixel unit. |
dschulze@4602 | 1173 | |
dschulze@4602 | 1174 | <h5 id=svg-angle><span class=secno>7.2.3.2. </span>The |
dschulze@4602 | 1175 | <var><angle></var> type</h5> |
dschulze@4602 | 1176 | |
dschulze@4602 | 1177 | <p> An angle can be a <var><number></var> without an unit identifier. |
dschulze@4602 | 1178 | In this case the <a href="#svg-number"><i>number</i></a> gets interpreted |
dschulze@4602 | 1179 | as a value in degrees. |
dschulze@4602 | 1180 | |
dschulze@4602 | 1181 | <h5 id=svg-number><span class=secno>7.2.3.3. </span>The |
dschulze@4602 | 1182 | <var><number></var> type</h5> |
dschulze@4598 | 1183 | |
dschulze@4598 | 1184 | <p> SVG supports scientific notations for numbers. Therefore a |
dschulze@4602 | 1185 | <var>number</var> gets parsed like described in SVG <a |
dschulze@4598 | 1186 | href="http://www.w3.org/TR/SVG/types.html#DataTypeNumber">Basic data |
dschulze@4598 | 1187 | types</a> for SVG attributes. |
dschulze@4598 | 1188 | |
dschulze@4598 | 1189 | <h3 id=svg-gradient-transform-pattern-transform><span class=secno>7.3. |
dschulze@4598 | 1190 | </span>The SVG ‘<code class=property>gradientTransform</code>’ |
dschulze@4598 | 1191 | and ‘<code class=property>patternTransform</code>’ attributes</h3> |
dschulze@4598 | 1192 | |
dschulze@4598 | 1193 | <p> SVG specifies the attributes ‘<code |
dschulze@4598 | 1194 | class=property>gradientTransform</code>’ and ‘<code |
dschulze@4598 | 1195 | class=property>patternTransform</code>’. This specification makes |
dschulze@4598 | 1196 | both attributes to presentation attributes. Both attributes use the same |
dschulze@4598 | 1197 | <a href="#svg-syntax">syntax</a> as the SVG ‘<a |
dschulze@4602 | 1198 | href="#effects"><code class=css><code |
dschulze@4602 | 1199 | class=property>transform</code></code></a>’ attribute. This |
dschulze@4602 | 1200 | specification won't introduce corresponding CSS style properties. Instead |
dschulze@4602 | 1201 | the style can be set by the ‘<a href="#effects"><code |
dschulze@4602 | 1202 | class=css><code class=property>transform</code></code></a>’ style |
dschulze@4602 | 1203 | property. |
dschulze@4601 | 1204 | |
dschulze@4601 | 1205 | <h3 id=svg-transformation-functions><span class=secno>7.4. </span>SVG |
dschulze@4598 | 1206 | transformation functions</h3> |
dschulze@4598 | 1207 | |
dschulze@4598 | 1208 | <p> For backward compatibility to existing SVG content, this specification |
dschulze@4601 | 1209 | must support all transform functions defined by <a |
dschulze@4598 | 1210 | href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The |
dschulze@4602 | 1211 | ‘<code class=css><code class=property>transform</code></code>’ |
dschulze@4602 | 1212 | attribute</a> in SVG 1.1. Therefore the two-dimensional transform function |
dschulze@4602 | 1213 | ‘<code class=css><code |
dschulze@4602 | 1214 | class=css>rotate(<angle>)</code></code>’ gets extended as |
dschulze@4602 | 1215 | follows: |
dschulze@4598 | 1216 | |
dschulze@4598 | 1217 | <dl> |
dschulze@4598 | 1218 | <dt> <code class=css>rotate(<angle>[, <translation-value>, |
dschulze@4598 | 1219 | <translation-value>])</code> |
dschulze@4598 | 1220 | |
dschulze@4598 | 1221 | <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle |
dschulze@4598 | 1222 | specified in the parameter about the origin of the element, as defined by |
dschulze@4602 | 1223 | the ‘<a href="#transform-origin"><code class=css><code |
dschulze@4602 | 1224 | class=property>transform-origin</code></code></a>’ property. If the |
dschulze@4602 | 1225 | optional translation values are specified, the transform origin is |
dschulze@4598 | 1226 | translated by that amount (using the current transformation matrix) for |
dschulze@4602 | 1227 | the duration of the rotate operation. For example ‘<code |
dschulze@4602 | 1228 | class=css><code class=css>rotate(90deg, 100px, |
dschulze@4602 | 1229 | 100px)</code></code>’ would elements cause to appear rotated |
dschulze@4602 | 1230 | one-quarter of a turn in the clockwise direction after a translation of |
dschulze@4602 | 1231 | 100 pixel in the vertical and horizontal direction. |
dschulze@4598 | 1232 | </dl> |
dschulze@4598 | 1233 | |
dschulze@4598 | 1234 | <p> User agents are just required to support the two optional arguments for |
dschulze@4598 | 1235 | translation on elements in the SVG namespace. |
dschulze@4598 | 1236 | |
dschulze@4601 | 1237 | <h3 id=svg-three-dimensional-functions><span class=secno>7.5. </span>SVG |
dschulze@4601 | 1238 | and 3D transformation functions</h3> |
dschulze@4601 | 1239 | |
dschulze@4601 | 1240 | <p> This specification explicitly allows to apply three-dimensional |
dschulze@4601 | 1241 | transform functions to the <a |
dschulze@4602 | 1242 | href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement"><em>container |
dschulze@4602 | 1243 | elements</em></a>: ‘<code class=property>a</code>’, |
dschulze@4602 | 1244 | ‘<code class=property>g</code>’, ‘<code |
dschulze@4601 | 1245 | class=property>svg</code>’, all <a |
dschulze@4602 | 1246 | href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement"><em>graphics |
dschulze@4602 | 1247 | elements</em></a>, all <a |
dschulze@4602 | 1248 | href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsReferencingElement"><em>graphics |
dschulze@4602 | 1249 | referencing elements</em></a> and the SVG <a |
dschulze@4601 | 1250 | href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement">‘<code |
dschulze@4601 | 1251 | class=property>foreignObject</code>’</a> element. |
dschulze@4601 | 1252 | |
dschulze@4602 | 1253 | <p> Three-dimensional transform functions and the properties ‘<a |
dschulze@4602 | 1254 | href="#perspective"><code class=css><code |
dschulze@4602 | 1255 | class=property>perspective</code></code></a>’, ‘<a |
dschulze@4602 | 1256 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 1257 | class=property>perspective-origin</code></code></a>’, ‘<a |
dschulze@4602 | 1258 | href="#transform-style"><code class=css><code |
dschulze@4602 | 1259 | class=property>transform-style</code></code></a>’ and ‘<a |
dschulze@4602 | 1260 | href="#backface-visibility"><code class=css><code |
dschulze@4602 | 1261 | class=property>backface-visibility</code></code></a>’ can not be |
dschulze@4602 | 1262 | used for the elements: ‘<code class=property>clipPath</code>’, |
dschulze@4602 | 1263 | ‘<code class=property>mask</code>’, ‘<code |
dschulze@4601 | 1264 | class=property>linearGradient</code>’, ‘<code |
dschulze@4601 | 1265 | class=property>radialGradient</code>’ and ‘<code |
dschulze@4601 | 1266 | class=property>pattern</code>’. If a transform list includes a |
dschulze@4601 | 1267 | three-dimensional transform function, the complete transform list must be |
dschulze@4602 | 1268 | ignored. The values of every previously named property must be ignored. <a |
dschulze@4602 | 1269 | class=term href="#transformable-element">Transformable elements</a> that |
dschulze@4602 | 1270 | are contained by one of these elements can have three-dimensional |
dschulze@4602 | 1271 | transform functions. Before a ‘<code |
dschulze@4601 | 1272 | class=property>clipPath</code>’, ‘<code |
dschulze@4601 | 1273 | class=property>mask</code>’ or ‘<code |
dschulze@4601 | 1274 | class=property>pattern</code>’ element can get applied to a target |
dschulze@4601 | 1275 | element, user agents must take the drawn results as static images in |
dschulze@4601 | 1276 | analogue of "flattening" the elements and taking the rendered content as a |
dschulze@4601 | 1277 | two-dimensional canvas. |
dschulze@4601 | 1278 | |
dschulze@4598 | 1279 | <h3 id=svg-object-bounding-box><span class=secno>7.6. </span>Object |
dschulze@4598 | 1280 | bounding box units</h3> |
dschulze@4598 | 1281 | |
dschulze@4598 | 1282 | <p> Percentage or fractional values in SVG are either relative to the |
dschulze@4598 | 1283 | elements viewport units or to the elements <a |
dschulze@4598 | 1284 | href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits">object |
dschulze@4598 | 1285 | bounding box units</a> like specified in SVG 1.1. To align with HTML, all |
dschulze@4598 | 1286 | percentage values for all properties defined in this specification are |
dschulze@4598 | 1287 | relative to the object bounding box units. |
dschulze@4598 | 1288 | |
dschulze@4598 | 1289 | <p> If an SVG element does not provide an object bounding box (like for the |
dschulze@4598 | 1290 | ‘<code class=property>pattern</code>’, ‘<code |
dschulze@4598 | 1291 | class=property>mask</code>’ or ‘<code |
dschulze@4598 | 1292 | class=property>clipPath</code>’ elements), the bounding box is the |
dschulze@4598 | 1293 | same like if the position x, y and the dimensions width and height are |
dschulze@4601 | 1294 | zero. Percentage values or keywords won't affect the rendering and are |
dschulze@4601 | 1295 | treated as if zero was specified. |
dschulze@4598 | 1296 | |
dschulze@4598 | 1297 | <div class=example> |
dschulze@4602 | 1298 | <p> The ‘<a href="#transform-origin"><code class=css><code |
dschulze@4602 | 1299 | class=property>transform-origin</code></code></a>’ property on the |
dschulze@4602 | 1300 | pattern in the following example specifies a ‘<code class=css><code |
dschulze@4602 | 1301 | class=css>50%</code></code>’ translation of the origin in the |
dschulze@4598 | 1302 | horizontal and vertical dimension. The ‘<a href="#effects"><code |
dschulze@4602 | 1303 | class=css><code class=property>transform</code></code></a>’ |
dschulze@4602 | 1304 | property specifies a translation as well, but in absolute lengths.</p> |
dschulze@4598 | 1305 | |
dschulze@4598 | 1306 | <pre><svg> |
dschulze@4598 | 1307 | <style> |
dschulze@4598 | 1308 | pattern { |
dschulze@4598 | 1309 | transform: translate(50px, 50px) rotate(45deg); |
dschulze@4598 | 1310 | transform-origin: 50% 50%; |
dschulze@4598 | 1311 | } |
dschulze@4598 | 1312 | </style> |
dschulze@4598 | 1313 | |
dschulze@4598 | 1314 | <defs> |
dschulze@4598 | 1315 | <pattern id="pattern-1"> |
dschulze@4598 | 1316 | <rect id="rect1" width="100" height="100" fill="blue" /> |
dschulze@4598 | 1317 | </pattern> |
dschulze@4598 | 1318 | </defs> |
dschulze@4598 | 1319 | |
dschulze@4598 | 1320 | <rect width="100" height="100" fill="url(#pattern-1)" /> |
dschulze@4598 | 1321 | </svg></pre> |
dschulze@4598 | 1322 | |
dschulze@4598 | 1323 | <p> A SVG ‘<code class=property>pattern</code>’ element |
dschulze@4598 | 1324 | doesn't have an object bounding box. Therefore the relative values of the |
dschulze@4602 | 1325 | ‘<a href="#transform-origin"><code class=css><code |
dschulze@4602 | 1326 | class=property>transform-origin</code></code></a>’ property don't |
dschulze@4602 | 1327 | affect the rendering and are treated as if zero was specified. The |
dschulze@4602 | 1328 | translation on the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1329 | class=property>transform</code></code></a>’ property is in absolute |
dschulze@4602 | 1330 | coordinates and translate the coordinate system by 50 pixel in each |
dschulze@4602 | 1331 | direction.</p> |
dschulze@4598 | 1332 | </div> |
dschulze@4598 | 1333 | |
dschulze@4601 | 1334 | <h3 id=transform-attribute-dom><span class=secno>7.7. </span>SVG DOM |
dschulze@4602 | 1335 | interface for the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1336 | class=property>transform</code></code></a>’ attribute</h3> |
dschulze@4602 | 1337 | |
dschulze@4602 | 1338 | <p> The SVG specification defines the ‘<code class=css><a |
dschulze@4602 | 1339 | href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList"><code |
dschulze@4602 | 1340 | class=property>SVGAnimatedTransformList</code></a></code>’ interface |
dschulze@4602 | 1341 | in SVG DOM to access the animated and the base value of the SVG transform |
dschulze@4602 | 1342 | attribute. To ensure backwards compatibility, this API must still be |
dschulze@4602 | 1343 | supported by user agents. |
dschulze@4602 | 1344 | |
dschulze@4602 | 1345 | <p> The ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1346 | class=property>transform</code></code></a>’ property contributes to |
dschulze@4602 | 1347 | the CSS cascade. According to SVG 1.1 user agents conceptually insert a <a |
dschulze@4601 | 1348 | href="http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes">new |
dschulze@4601 | 1349 | author style sheet</a> for presentation attributes, which is the first in |
dschulze@4602 | 1350 | the author style sheet collection. ‘<code class=css><code |
dschulze@4602 | 1351 | class=property>baseVal</code></code>’ gives the author the |
dschulze@4602 | 1352 | possibility to access and modify the values of the SVG ‘<a |
dschulze@4602 | 1353 | href="#effects"><code class=css><code |
dschulze@4602 | 1354 | class=property>transform</code></code></a>’ attribute. To provide |
dschulze@4602 | 1355 | the necessary backward compatibility to SVG DOM, ‘<code |
dschulze@4602 | 1356 | class=css><code class=property>baseVal</code></code>’ must reflect |
dschulze@4602 | 1357 | the values of this author style sheet. All modifications to SVG DOM |
dschulze@4602 | 1358 | objects of ‘<code class=css><code |
dschulze@4602 | 1359 | class=property>baseVal</code></code>’ must affect this author style |
dschulze@4602 | 1360 | sheet immediately. |
dschulze@4602 | 1361 | |
dschulze@4602 | 1362 | <p> ‘<code class=css><code |
dschulze@4602 | 1363 | class=property>animVal</code></code>’ represents the computed style |
dschulze@4602 | 1364 | of the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1365 | class=property>transform</code></code></a>’ property. Therefore it |
dschulze@4602 | 1366 | includes all applied <a href="http://www.w3.org/TR/css3-transitions/">CSS3 |
dschulze@4602 | 1367 | Transitions</a>, <a href="http://www.w3.org/TR/css3-animations/">CSS3 |
dschulze@4602 | 1368 | Animations</a> or <a href="#svg-animation">SVG Animations</a> if any of |
dschulze@4602 | 1369 | those are underway. The computed style and SVG DOM objects of ‘<code |
dschulze@4602 | 1370 | class=css><code class=property>animVal</code></code>’ can not be |
dschulze@4601 | 1371 | modified. |
dschulze@4601 | 1372 | |
dschulze@4602 | 1373 | <p> The attribute ‘<code class=css><a |
dschulze@4602 | 1374 | href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__type"><code |
dschulze@4602 | 1375 | class=property>type</code></a></code>’ of <a |
dschulze@4602 | 1376 | href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">‘<code |
dschulze@4602 | 1377 | class=property>SVGTransform</code>’</a> must return ‘<code |
dschulze@4602 | 1378 | class=css><a |
dschulze@4601 | 1379 | href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN"> |
dschulze@4602 | 1380 | <code class=css>SVG_TRANSFORM_UNKNOWN</code></a></code>’ for <a |
dschulze@4601 | 1381 | href="#transformation-functions">Transformation Functions</a> or unit |
dschulze@4601 | 1382 | types that are not supported by this interface. It might still be possible |
dschulze@4602 | 1383 | to get the ‘<code class=css><a |
dschulze@4602 | 1384 | href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix"><code |
dschulze@4602 | 1385 | class=property>SVGMatrix</code></a></code>’ by the attribute |
dschulze@4602 | 1386 | ‘<code class=css><a |
dschulze@4602 | 1387 | href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__matrix"><code |
dschulze@4602 | 1388 | class=property>matrix</code></a></code>’. |
dschulze@4598 | 1389 | |
dschulze@4598 | 1390 | <h3 id=svg-animation><span class=secno>7.8. </span>SVG Animation</h3> |
dschulze@4598 | 1391 | |
dschulze@4598 | 1392 | <h4 id=svg-animate-element><span class=secno>7.8.1. </span>The SVG |
dschulze@4598 | 1393 | ‘<code class=property>animate</code>’ and ‘<code |
dschulze@4598 | 1394 | class=property>set</code>’ element</h4> |
dschulze@4598 | 1395 | |
dschulze@4598 | 1396 | <p> The SVG 1.1 specification did not define animations of the ‘<a |
dschulze@4602 | 1397 | href="#effects"><code class=css><code |
dschulze@4602 | 1398 | class=property>transform</code></code></a>’ attribute for the SVG <a |
dschulze@4601 | 1399 | href="http://www.w3.org/TR/SVG/animate.html#AnimateElement">‘<code |
dschulze@4601 | 1400 | class=property>animate</code>’</a> element or the SVG <a |
dschulze@4601 | 1401 | href="http://www.w3.org/TR/SVG/animate.html#SetElement">‘<code |
dschulze@4601 | 1402 | class=property>set</code>’</a> element. This specification |
dschulze@4601 | 1403 | explicitly allows the animation of the presentation attributes ‘<a |
dschulze@4602 | 1404 | href="#effects"><code class=css><code |
dschulze@4602 | 1405 | class=property>transform</code></code></a>’, ‘<code |
dschulze@4602 | 1406 | class=property>gradientTransform</code>’ and ‘<code |
dschulze@4602 | 1407 | class=property>patternTransform</code>’ for the ‘<code |
dschulze@4602 | 1408 | class=property>animate</code>’ and ‘<code |
dschulze@4598 | 1409 | class=property>set</code>’ elements. SVG animation must run the same |
dschulze@4598 | 1410 | animation steps as described in section <a href="#animation">Transitions |
dschulze@4598 | 1411 | and Animations between Transform Values</a>. |
dschulze@4598 | 1412 | |
dschulze@4598 | 1413 | <h4 id=svg-attribute-name><span class=secno>7.8.2. </span>The SVG |
dschulze@4598 | 1414 | ‘<code class=property>attributeName</code>’ attribute</h4> |
dschulze@4598 | 1415 | |
dschulze@4598 | 1416 | <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a> |
dschulze@4598 | 1417 | defines the <a |
dschulze@4598 | 1418 | href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">‘<code |
dschulze@4598 | 1419 | class=property>attributeName</code>’</a> attribute to specify the |
dschulze@4598 | 1420 | name of the target attribute. For the presentation attributes ‘<code |
dschulze@4598 | 1421 | class=property>gradientTransform</code>’ and ‘<code |
dschulze@4598 | 1422 | class=property>patternTransform</code>’ it will also be possible to |
dschulze@4602 | 1423 | use the value ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1424 | class=property>transform</code></code></a>’. The same presentation |
dschulze@4598 | 1425 | attribute style will get animated. |
dschulze@4598 | 1426 | |
dschulze@4598 | 1427 | <div class=example> |
dschulze@4598 | 1428 | <p> In this example the gradient transformation of the linear gradient |
dschulze@4598 | 1429 | gets animated.</p> |
dschulze@4598 | 1430 | |
dschulze@4598 | 1431 | <pre><linearGradient gradientTransform="scale(2)"> |
dschulze@4598 | 1432 | <animate attributeName="gradientTransform" from="scale(2)" to="scale(4)" |
dschulze@4598 | 1433 | dur="3s" additive="sum"/> |
dschulze@4598 | 1434 | <animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)" |
dschulze@4598 | 1435 | dur="3s" additive="sum"/> |
dschulze@4598 | 1436 | </linearGradient></pre> |
dschulze@4598 | 1437 | |
dschulze@4598 | 1438 | <p>The ‘<code class=property>linearGradient</code>’ element |
dschulze@4598 | 1439 | specifies the ‘<code class=property>gradientTransform</code>’ |
dschulze@4598 | 1440 | presentation attribute. The two ‘<code |
dschulze@4598 | 1441 | class=property>animate</code>’ elements address the target |
dschulze@4598 | 1442 | attribute ‘<code class=property>gradientTransform</code>’ and |
dschulze@4602 | 1443 | ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1444 | class=property>transform</code></code></a>’. Even so all animations |
dschulze@4602 | 1445 | apply to the same gradient transformation by taking the value of the |
dschulze@4598 | 1446 | ‘<code class=property>gradientTransform</code>’ presentation |
dschulze@4598 | 1447 | attribute, applying the scaling of the first animation and applying the |
dschulze@4598 | 1448 | translation of the second animation one after the other.</p> |
dschulze@4598 | 1449 | </div> |
dschulze@4598 | 1450 | |
dschulze@4598 | 1451 | <h4 id=svg-attribute-type><span class=secno>7.8.3. </span>The SVG |
dschulze@4598 | 1452 | ‘<code class=property>attributeType</code>’ attribute</h4> |
dschulze@4598 | 1453 | |
dschulze@4598 | 1454 | <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a> |
dschulze@4598 | 1455 | defines the <a |
dschulze@4598 | 1456 | href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">‘<code |
dschulze@4598 | 1457 | class=property>attributeType</code>’</a> attribute to specify the |
dschulze@4598 | 1458 | namespace in which the target attribute and its associated values are |
dschulze@4602 | 1459 | defined. The attribute can have the values ‘<code class=css><code |
dschulze@4602 | 1460 | class=css>CSS</code></code>’, ‘<code class=css><code |
dschulze@4602 | 1461 | class=css>XML</code></code>’ or ‘<code class=css><code |
dschulze@4602 | 1462 | class=css>auto</code></code>’, where ‘<code class=css><code |
dschulze@4602 | 1463 | class=css>auto</code></code>’ is the default value. |
dschulze@4598 | 1464 | |
dschulze@4598 | 1465 | <p> However, in the combination with the ‘<a href="#effects"><code |
dschulze@4602 | 1466 | class=css><code class=property>transform</code></code></a>’, |
dschulze@4602 | 1467 | ‘<code class=property>patternTransform</code>’ and |
dschulze@4602 | 1468 | ‘<code class=property>gradientTransform</code>’ presentation |
dschulze@4602 | 1469 | attributes, ‘<code class=property>attributeType</code>’ can |
dschulze@4602 | 1470 | just be used to indicate the syntax rules used for the transform attribute |
dschulze@4602 | 1471 | values. A value of ‘<code class=css><code |
dschulze@4602 | 1472 | class=css>CSS</code></code>’ indicates that the transform values |
dschulze@4602 | 1473 | should be parsed according to the CSS syntax. A value of ‘<code |
dschulze@4602 | 1474 | class=css><code class=css>XML</code></code>’ indicates that the |
dschulze@4602 | 1475 | transform values should be parsed according to the SVG ‘<a |
dschulze@4602 | 1476 | href="#effects"><code class=css><code |
dschulze@4602 | 1477 | class=property>transform</code></code></a>’ <a |
dschulze@4602 | 1478 | href="#svg-syntax">syntax</a>. |
dschulze@4602 | 1479 | |
dschulze@4602 | 1480 | <p> User agents are recommended to use the more tolerant SVG ‘<a |
dschulze@4602 | 1481 | href="#effects"><code class=css><code |
dschulze@4602 | 1482 | class=property>transform</code></code></a>’ <a |
dschulze@4602 | 1483 | href="#svg-syntax">syntax</a> for a value of ‘<code class=css><code |
dschulze@4602 | 1484 | class=css>auto</code></code>’ to parse transform values. |
dschulze@4598 | 1485 | |
dschulze@4598 | 1486 | <h4 id=svg-animateTransform-extension><span class=secno>7.8.4. </span>The |
dschulze@4598 | 1487 | SVG ‘<code class=property>animateTransform</code>’ element</h4> |
dschulze@4598 | 1488 | |
dschulze@4601 | 1489 | <p> This specification introduces new transform functions that are not |
dschulze@4598 | 1490 | supported by <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 |
dschulze@4602 | 1491 | Animation</a>. The SVG ‘<code class=css><a |
dschulze@4602 | 1492 | href="http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement"><code |
dschulze@4602 | 1493 | class=property>type</code></a></code>’ attribute gets extended by |
dschulze@4602 | 1494 | all transform functions listed in <a href="#two-d-transform-functions">2D |
dschulze@4601 | 1495 | Transformation Functions</a>, <a href="#three-d-transform-functions">3D |
dschulze@4601 | 1496 | Transformation Functions</a> and <a |
dschulze@4598 | 1497 | href="#svg-transformation-functions">SVG Transformation Functions</a>.</p> |
simon@4345 | 1498 | <!-- ======================================================================================================= --> |
simon@4345 | 1499 | |
dschulze@4602 | 1500 | <h2 id=transform-origin-property><span class=secno>8. </span> The ‘<a |
dschulze@4602 | 1501 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 1502 | class=property>transform-origin</code></code></a>’ Property</h2> |
vhardy@3672 | 1503 | |
simon@4366 | 1504 | <table class=propdef> |
simon@4366 | 1505 | <tbody> |
simon@4366 | 1506 | <tr> |
simon@4366 | 1507 | <td> <em>Name:</em> |
simon@4366 | 1508 | |
simon@4366 | 1509 | <td> <dfn id=transform-origin>transform-origin</dfn> |
simon@4366 | 1510 | |
simon@4366 | 1511 | <tr> |
simon@4366 | 1512 | <td> <em>Value:</em> |
simon@4366 | 1513 | |
ayg@4703 | 1514 | <td> [ <percentage> | <length> | left | center | right | top | |
ayg@4703 | 1515 | bottom]<br> |
ayg@4703 | 1516 | |<br> |
ayg@4703 | 1517 | [<br> |
ayg@4703 | 1518 | [ <percentage> | <length> | left | center | right |
ayg@4703 | 1519 | ]<br> |
ayg@4703 | 1520 | &&<br> |
ayg@4703 | 1521 | [ <percentage> | <length> | top | center | bottom |
ayg@4703 | 1522 | ]<br> |
ayg@4703 | 1523 | ] <length>?<br> |
simon@4366 | 1524 | |
simon@4366 | 1525 | <tr> |
simon@4366 | 1526 | <td> <em>Initial:</em> |
simon@4366 | 1527 | |
dschulze@4483 | 1528 | <td> 0 0 for SVG elements without associated CSS layout box, 50% 50% for |
dschulze@4483 | 1529 | all other elements |
simon@4366 | 1530 | |
simon@4366 | 1531 | <tr> |
simon@4366 | 1532 | <td> <em>Applies to:</em> |
simon@4366 | 1533 | |
simon@4366 | 1534 | <td> <a href="#TermTransformableElement">transformable elements</a> |
simon@4366 | 1535 | |
simon@4366 | 1536 | <tr> |
simon@4366 | 1537 | <td> <em>Inherited:</em> |
simon@4366 | 1538 | |
simon@4366 | 1539 | <td> no |
simon@4366 | 1540 | |
simon@4366 | 1541 | <tr> |
simon@4366 | 1542 | <td> <em>Percentages:</em> |
simon@4366 | 1543 | |
dschulze@4483 | 1544 | <td> refer to the size of the element's bounding box |
simon@4366 | 1545 | |
simon@4366 | 1546 | <tr> |
simon@4366 | 1547 | <td> <em>Media:</em> |
simon@4366 | 1548 | |
simon@4366 | 1549 | <td> visual |
simon@4366 | 1550 | |
simon@4366 | 1551 | <tr> |
simon@4366 | 1552 | <td> <em>Computed value:</em> |
simon@4366 | 1553 | |
simon@4366 | 1554 | <td> For <length> the absolute value, otherwise a percentage |
simon@4366 | 1555 | </table> |
simon@4366 | 1556 | |
dschulze@4602 | 1557 | <p> The values of the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1558 | class=property>transform</code></code></a>’ and ‘<a |
dschulze@4602 | 1559 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 1560 | class=property>transform-origin</code></code></a>’ properties are |
dschulze@4602 | 1561 | used to compute the <a href="#TermTransformationMatrix"><i>transformation |
simon@4366 | 1562 | matrix</i></a>, as described above. |
vhardy@3672 | 1563 | |
vhardy@3672 | 1564 | <p>If only one value is specified, the second value is assumed to be |
ayg@4703 | 1565 | ‘<code class=property>center</code>’. If one or two values are |
ayg@4703 | 1566 | specified, the third value is assumed to be ‘<code |
ayg@4703 | 1567 | class=css>0px</code>’. |
ayg@4703 | 1568 | |
ayg@4703 | 1569 | <p>If at least one of the first two values is not a keyword, then the first |
ayg@4703 | 1570 | value represents the horizontal position (or offset) and the second |
ayg@4703 | 1571 | represents the vertical position (or offset). The third value always |
ayg@4703 | 1572 | represents the Z position (or offset). |
ayg@4703 | 1573 | |
ayg@4703 | 1574 | <p><var><percentage></var> and <var><length></var> for the |
ayg@4703 | 1575 | first two values represent an offset of the transform origin from the top |
ayg@4703 | 1576 | left corner of the element's bounding box. |
dschulze@4483 | 1577 | |
dschulze@4483 | 1578 | <p>For SVG elements without an associated CSS layout box the |
dschulze@4483 | 1579 | <var><length></var> values represent an offset from the point of |
ayg@4703 | 1580 | origin of the element's local coordinate space.</p> |
vhardy@3672 | 1581 | <!-- ======================================================================================================= --> |
vhardy@3672 | 1582 | |
dschulze@4602 | 1583 | <h2 id=transform-style-property><span class=secno>9. </span> The ‘<a |
dschulze@4602 | 1584 | href="#transform-style"><code class=css><code |
dschulze@4602 | 1585 | class=property>transform-style</code></code></a>’ Property</h2> |
simon@4345 | 1586 | |
simon@4345 | 1587 | <table class=propdef> |
simon@4345 | 1588 | <tbody> |
simon@4345 | 1589 | <tr> |
simon@4345 | 1590 | <td> <em>Name:</em> |
simon@4345 | 1591 | |
simon@4345 | 1592 | <td> <dfn id=transform-style>transform-style</dfn> |
simon@4345 | 1593 | |
simon@4345 | 1594 | <tr> |
simon@4345 | 1595 | <td> <em>Value:</em> |
simon@4345 | 1596 | |
simon@4345 | 1597 | <td> flat | preserve-3d |
simon@4345 | 1598 | |
simon@4345 | 1599 | <tr> |
simon@4345 | 1600 | <td> <em>Initial:</em> |
simon@4345 | 1601 | |
simon@4345 | 1602 | <td> flat |
simon@4345 | 1603 | |
simon@4345 | 1604 | <tr> |
simon@4345 | 1605 | <td> <em>Applies to:</em> |
simon@4345 | 1606 | |
simon@4345 | 1607 | <td> <a href="#TermTransformableElement">transformable elements</a> |
simon@4345 | 1608 | |
simon@4345 | 1609 | <tr> |
simon@4345 | 1610 | <td> <em>Inherited:</em> |
simon@4345 | 1611 | |
simon@4345 | 1612 | <td> no |
simon@4345 | 1613 | |
simon@4345 | 1614 | <tr> |
simon@4345 | 1615 | <td> <em>Percentages:</em> |
simon@4345 | 1616 | |
simon@4345 | 1617 | <td> N/A |
simon@4345 | 1618 | |
simon@4345 | 1619 | <tr> |
simon@4345 | 1620 | <td> <em>Media:</em> |
simon@4345 | 1621 | |
simon@4345 | 1622 | <td> visual |
simon@4345 | 1623 | |
simon@4345 | 1624 | <tr> |
simon@4345 | 1625 | <td> <em>Computed value:</em> |
simon@4345 | 1626 | |
simon@4345 | 1627 | <td> Same as specified value. |
simon@4345 | 1628 | </table> |
simon@4345 | 1629 | |
dschulze@4602 | 1630 | <p> A value of ‘<code class=css><code |
dschulze@4602 | 1631 | class=css>preserve-3d</code></code>’ for ‘<a |
dschulze@4602 | 1632 | href="#transform-style"><code class=css><code |
dschulze@4602 | 1633 | class=property>transform-style</code></code></a>’ establishes a |
dschulze@4602 | 1634 | stacking context. |
simon@4345 | 1635 | |
simon@4345 | 1636 | <p> The following CSS property values require the user agent to create a |
simon@4345 | 1637 | flattened representation of the descendant elements before they can be |
dschulze@4602 | 1638 | applied, and therefore override the behavior of ‘<a |
dschulze@4602 | 1639 | href="#transform-style"><code class=css><code |
dschulze@4602 | 1640 | class=property>transform-style</code></code></a>’: ‘<code |
dschulze@4602 | 1641 | class=css><code class=css>preserve-3d</code></code>’: |
simon@4345 | 1642 | |
simon@4345 | 1643 | <ul> |
dschulze@4602 | 1644 | <li>‘<code class=css><code |
dschulze@4602 | 1645 | class=property>overflow</code></code>’: any value other than |
dschulze@4602 | 1646 | ‘<code class=css><code class=property>visible</code></code>’. |
dschulze@4602 | 1647 | |
dschulze@4602 | 1648 | <li>‘<code class=css><code |
dschulze@4602 | 1649 | class=property>opacity</code></code>’: any value other than 1. |
dschulze@4602 | 1650 | |
dschulze@4602 | 1651 | <li>‘<code class=css><code |
dschulze@4602 | 1652 | class=property>filter</code></code>’: any value other than |
dschulze@4602 | 1653 | ‘<code class=css><code class=property>none</code></code>’.</li> |
simon@4345 | 1654 | <!-- Others? --> |
simon@4345 | 1655 | </ul> |
simon@4366 | 1656 | |
simon@4366 | 1657 | <div class=issue> |
simon@4366 | 1658 | <p class=desc>Should this affect the computed value of transform-style?</p> |
simon@4366 | 1659 | </div> |
simon@4366 | 1660 | |
dschulze@4602 | 1661 | <p> The values of the ‘<a href="#effects"><code class=css><code |
dschulze@4602 | 1662 | class=property>transform</code></code></a>’ and ‘<a |
dschulze@4602 | 1663 | href="#transform-origin"><code class=css><code |
dschulze@4602 | 1664 | class=property>transform-origin</code></code></a>’ properties are |
dschulze@4602 | 1665 | used to compute the <a href="#TermTransformationMatrix"><i>transformation |
simon@4366 | 1666 | matrix</i></a>, as described above.</p> |
simon@4345 | 1667 | <!-- ======================================================================================================= --> |
simon@4345 | 1668 | |
dschulze@4602 | 1669 | <h2 id=perspective-property><span class=secno>10. </span> The ‘<a |
dschulze@4602 | 1670 | href="#perspective"><code class=css><code |
dschulze@4602 | 1671 | class=property>perspective</code></code></a>’ Property</h2> |
simon@4365 | 1672 | |
simon@4345 | 1673 | <table class=propdef> |
simon@4345 | 1674 | <tbody> |
simon@4345 | 1675 | <tr> |
simon@4345 | 1676 | <td> <em>Name:</em> |
simon@4345 | 1677 | |
simon@4345 | 1678 | <td> <dfn id=perspective>perspective</dfn> |
simon@4345 | 1679 | |
simon@4345 | 1680 | <tr> |
simon@4345 | 1681 | <td> <em>Value:</em> |
simon@4345 | 1682 | |
simon@4345 | 1683 | <td> none | <length> |
simon@4345 | 1684 | |
simon@4345 | 1685 | <tr> |
simon@4345 | 1686 | <td> <em>Initial:</em> |
simon@4345 | 1687 | |
simon@4345 | 1688 | <td> none |
simon@4345 | 1689 | |
simon@4345 | 1690 | <tr> |
simon@4345 | 1691 | <td> <em>Applies to:</em> |
simon@4345 | 1692 | |
simon@4345 | 1693 | <td> <a href="#TermTransformableElement">transformable elements</a> |
simon@4345 | 1694 | |
simon@4345 | 1695 | <tr> |
simon@4345 | 1696 | <td> <em>Inherited:</em> |
simon@4345 | 1697 | |
simon@4345 | 1698 | <td> no |
simon@4345 | 1699 | |
simon@4345 | 1700 | <tr> |
simon@4345 | 1701 | <td> <em>Percentages:</em> |
simon@4345 | 1702 | |
simon@4345 | 1703 | <td> N/A |
simon@4345 | 1704 | |
simon@4345 | 1705 | <tr> |
simon@4345 | 1706 | <td> <em>Media:</em> |
simon@4345 | 1707 | |
simon@4345 | 1708 | <td> visual |
simon@4345 | 1709 | |
simon@4345 | 1710 | <tr> |
simon@4345 | 1711 | <td> <em>Computed value:</em> |
simon@4345 | 1712 | |
simon@4345 | 1713 | <td> Same as specified value. |
simon@4345 | 1714 | </table> |
simon@4345 | 1715 | |
dschulze@4602 | 1716 | <p> If the value is ‘<code class=css><code |
dschulze@4602 | 1717 | class=css>none</code></code>’, less than or equal to 0 no |
dschulze@4602 | 1718 | perspective transform is applied. |
simon@4345 | 1719 | |
simon@4345 | 1720 | <p> The use of this property with any value other than ‘<code |
dschulze@4602 | 1721 | class=css><code class=css>none</code></code>’ establishes a stacking |
dschulze@4602 | 1722 | context. It also establishes a containing block (somewhat similar to |
dschulze@4602 | 1723 | ‘<code class=css><code class=css>position: |
dschulze@4602 | 1724 | relative</code></code>’), just like the ‘<a |
dschulze@4602 | 1725 | href="#effects"><code class=css><code |
dschulze@4602 | 1726 | class=property>transform</code></code></a>’ property does. |
dschulze@4602 | 1727 | |
dschulze@4602 | 1728 | <p> The values of the ‘<a href="#perspective"><code class=css><code |
dschulze@4602 | 1729 | class=property>perspective</code></code></a>’ and ‘<a |
dschulze@4602 | 1730 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 1731 | class=property>perspective-origin</code></code></a>’ properties are |
dschulze@4602 | 1732 | used to compute the <a href="#TermPerspectiveMatrix"><i>perspective |
simon@4366 | 1733 | matrix</i></a>, as described above.</p> |
simon@4345 | 1734 | <!-- ======================================================================================================= --> |
simon@4345 | 1735 | |
dschulze@4602 | 1736 | <h2 id=perspective-origin-property><span class=secno>11. </span> The |
dschulze@4602 | 1737 | ‘<a href="#perspective-origin"><code class=css><code |
dschulze@4602 | 1738 | class=property>perspective-origin</code></code></a>’ Property</h2> |
dschulze@4602 | 1739 | |
dschulze@4602 | 1740 | <p> The ‘<a href="#perspective-origin"><code class=css><code |
dschulze@4602 | 1741 | class=property>perspective-origin</code></code></a>’ property |
dschulze@4602 | 1742 | establishes the origin for the <a |
dschulze@4602 | 1743 | href="#perspective"><em>perspective</em></a> property. It effectively sets |
dschulze@4602 | 1744 | the X and Y position at which the viewer appears to be looking at the |
dschulze@4602 | 1745 | children of the element. |
simon@4345 | 1746 | |
simon@4345 | 1747 | <table class=propdef> |
simon@4345 | 1748 | <tbody> |
simon@4345 | 1749 | <tr> |
simon@4345 | 1750 | <td> <em>Name:</em> |
simon@4345 | 1751 | |
simon@4345 | 1752 | <td> <dfn id=perspective-origin>perspective-origin</dfn> |
simon@4345 | 1753 | |
simon@4345 | 1754 | <tr> |
simon@4345 | 1755 | <td> <em>Value:</em> |
simon@4345 | 1756 | |
simon@4345 | 1757 | <td> [ [ <percentage> | <length> | left | center | right ] [ |
simon@4345 | 1758 | <percentage> | <length> | top | center | bottom ]? ] | [ [ |
simon@4345 | 1759 | left | center | right ] || [ top | center | bottom ] ] |
simon@4345 | 1760 | |
simon@4345 | 1761 | <tr> |
simon@4345 | 1762 | <td> <em>Initial:</em> |
simon@4345 | 1763 | |
simon@4345 | 1764 | <td> 50% 50% |
simon@4345 | 1765 | |
simon@4345 | 1766 | <tr> |
simon@4345 | 1767 | <td> <em>Applies to:</em> |
simon@4345 | 1768 | |
simon@4345 | 1769 | <td> <a href="#TermTransformableElement">transformable elements</a> |
simon@4345 | 1770 | |
simon@4345 | 1771 | <tr> |
simon@4345 | 1772 | <td> <em>Inherited:</em> |
simon@4345 | 1773 | |
simon@4345 | 1774 | <td> no |
simon@4345 | 1775 | |
simon@4345 | 1776 | <tr> |
simon@4345 | 1777 | <td> <em>Percentages:</em> |
simon@4345 | 1778 | |
dschulze@4483 | 1779 | <td> refer to the size of the element's bounding box |
simon@4345 | 1780 | |
simon@4345 | 1781 | <tr> |
simon@4345 | 1782 | <td> <em>Media:</em> |
simon@4345 | 1783 | |
simon@4345 | 1784 | <td> visual |
simon@4345 | 1785 | |
simon@4345 | 1786 | <tr> |
simon@4345 | 1787 | <td> <em>Computed value:</em> |
simon@4345 | 1788 | |
simon@4345 | 1789 | <td> Same as specified value. |
simon@4345 | 1790 | </table> |
simon@4365 | 1791 | |
dschulze@4602 | 1792 | <p> The values of the ‘<a href="#perspective"><code class=css><code |
dschulze@4602 | 1793 | class=property>perspective</code></code></a>’ and ‘<a |
dschulze@4602 | 1794 | href="#perspective-origin"><code class=css><code |
dschulze@4602 | 1795 | class=property>perspective-origin</code></code></a>’ properties are |
dschulze@4602 | 1796 | used to compute the <a href="#TermPerspectiveMatrix"><i>perspective |
simon@4366 | 1797 | matrix</i></a>, as described above.</p> |
simon@4345 | 1798 | <!-- ======================================================================================================= --> |
simon@4345 | 1799 | |
dschulze@4602 | 1800 | <h2 id=backface-visibility-property><span class=secno>12. </span> The |
dschulze@4602 | 1801 | ‘<a href="#backface-visibility"><code class=css><code |
dschulze@4602 | 1802 | class=property>backface-visibility</code></code></a>’ Property</h2> |
dschulze@4602 | 1803 | |
dschulze@4602 | 1804 | <p> The ‘<a href="#backface-visibility"><code class=css><code |
dschulze@4602 | 1805 | class=property>backface-visibility</code></code></a>’ property |
dschulze@4602 | 1806 | determines whether or not the "back" side of a transformed element is |
dschulze@4602 | 1807 | visible when facing the viewer. With an identity transform, the front side |
dschulze@4602 | 1808 | of an element faces the viewer. Applying a rotation about Y of 180 degrees |
dschulze@4602 | 1809 | (for instance) would cause the back side of the element to face the |
dschulze@4602 | 1810 | viewer.</p> |
simon@4345 | 1811 | <!-- This should not be in a normative section. --> |
simon@4345 | 1812 | |
simon@4345 | 1813 | <p> This property is useful when you place two elements back-to-back, as |
simon@4345 | 1814 | you would to create a playing card. Without this property, the front and |
simon@4345 | 1815 | back elements could switch places at times during an animation to flip the |
simon@4345 | 1816 | card. Another example is creating a box out of 6 elements, but where you |
simon@4345 | 1817 | want to see the inside faces of the box. This is useful when creating the |
simon@4345 | 1818 | backdrop for a 3 dimensional stage. |
simon@4345 | 1819 | |
simon@4345 | 1820 | <table class=propdef> |
simon@4345 | 1821 | <tbody> |
simon@4345 | 1822 | <tr> |
simon@4345 | 1823 | <td> <em>Name:</em> |
simon@4345 | 1824 | |
simon@4345 | 1825 | <td> <dfn id=backface-visibility>backface-visibility</dfn> |
simon@4345 | 1826 | |
simon@4345 | 1827 | <tr> |
simon@4345 | 1828 | <td> <em>Value:</em> |
simon@4345 | 1829 | |
simon@4345 | 1830 | <td> visible | hidden |
simon@4345 | 1831 | |
simon@4345 | 1832 | <tr> |
simon@4345 | 1833 | <td> <em>Initial:</em> |
simon@4345 | 1834 | |
simon@4345 | 1835 | <td> visible |
simon@4345 | 1836 | |
simon@4345 | 1837 | <tr> |
simon@4345 | 1838 | <td> <em>Applies to:</em> |
simon@4345 | 1839 | |
simon@4366 | 1840 | <td> <a href="#TermTransformableElement">transformable elements</a> |
simon@4345 | 1841 | |
simon@4345 | 1842 | <tr> |
simon@4345 | 1843 | <td> <em>Inherited:</em> |
simon@4345 | 1844 | |
simon@4345 | 1845 | <td> no |
simon@4345 | 1846 | |
simon@4345 | 1847 | <tr> |
simon@4345 | 1848 | <td> <em>Percentages:</em> |
simon@4345 | 1849 | |
simon@4345 | 1850 | <td> N/A |
simon@4345 | 1851 | |
simon@4345 | 1852 | <tr> |
simon@4345 | 1853 | <td> <em>Media:</em> |
simon@4345 | 1854 | |
simon@4345 | 1855 | <td> visual |
simon@4345 | 1856 | |
simon@4345 | 1857 | <tr> |
simon@4345 | 1858 | <td> <em>Computed value:</em> |
simon@4345 | 1859 | |
simon@4345 | 1860 | <td> Same as specified value. |
simon@4345 | 1861 | </table> |
simon@4367 | 1862 | |
dschulze@4602 | 1863 | <p> The visibility of an element with ‘<code class=css><code |
dschulze@4602 | 1864 | class=css>backface-visibility: hidden</code></code>’ is determined |
dschulze@4602 | 1865 | as follows: |
simon@4367 | 1866 | |
simon@4367 | 1867 | <ol> |
simon@4367 | 1868 | <li>Compute a matrix representing the accumulated transform from the |
simon@4376 | 1869 | viewport, taking the translations due to the CSS visual formatting mode, |
simon@4367 | 1870 | the perpsective and transformation matrices into account, in a similar |
simon@4367 | 1871 | manner to the computation of the accumulated transform for an element in |
simon@4367 | 1872 | a 3D rendering context. |
simon@4367 | 1873 | |
simon@4367 | 1874 | <li> If the component of the matrix in row 3, column 3 is negative, then |
simon@4367 | 1875 | the element should be hidden, otherwise it is visible. |
simon@4367 | 1876 | </ol> |
simon@4367 | 1877 | |
simon@4367 | 1878 | <div class=issue> Is the relevant matrix here really relative to the |
simon@4367 | 1879 | viewport, or to the root of the 3D rendering context?</div> |
simon@4345 | 1880 | <!-- ======================================================================================================= --> |
simon@4345 | 1881 | |
dschulze@4598 | 1882 | <h2 id=transform-functions><span class=secno>13. </span> The Transformation |
vhardy@3672 | 1883 | Functions</h2> |
vhardy@3672 | 1884 | |
simon@4365 | 1885 | <p> The value of the <a href="#effects"><code |
simon@4365 | 1886 | class=property>transform</code></a> property is a list of |
dschulze@4602 | 1887 | <var><transform-functions></var> applied in the order provided. The |
dschulze@4602 | 1888 | individual transform functions are separated by whitespace. The set of |
dschulze@4602 | 1889 | allowed transform functions is given below. In this list the type |
dschulze@4602 | 1890 | <var><translation-value></var> is defined as a |
dschulze@4602 | 1891 | <var><length></var> or <var><percentage></var> value, and the |
dschulze@4602 | 1892 | <var><angle></var> type is defined by <a |
dschulze@4598 | 1893 | href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module.</a> |
dschulze@4602 | 1894 | Wherever <var><angle></var> is used in this specification, a |
dschulze@4602 | 1895 | <var><number></var> that is equal to zero is also allowed, which is |
dschulze@4602 | 1896 | treated the same as an angle of zero degrees. |
vhardy@3672 | 1897 | |
dschulze@4598 | 1898 | <h3 id=two-d-transform-functions><span class=secno>13.1. </span>2D |
simon@4358 | 1899 | Transformation Functions</h3> |
simon@4358 | 1900 | |
vhardy@3672 | 1901 | <dl> |
simon@4365 | 1902 | <dt> <code class=css>matrix(<number>, <number>, |
simon@4365 | 1903 | <number>, <number>, <number>, <number>)</code> |
vhardy@3672 | 1904 | |
vhardy@3672 | 1905 | <dd> specifies a 2D transformation in the form of a <a |
dschulze@4491 | 1906 | href="#MatrixDefined">transformation matrix</a> of the six values a-f. |
simon@4365 | 1907 | |
simon@4365 | 1908 | <dt> <code class=css>translate(<translation-value>[, |
simon@4365 | 1909 | <translation-value>])</code> |
vhardy@3672 | 1910 | |
dschulze@4491 | 1911 | <dd> specifies a <a href="#TranslateDefined">2D translation</a> by the |
dschulze@4491 | 1912 | vector [tx, ty], where tx is the first translation-value parameter and ty |
dschulze@4491 | 1913 | is the optional second translation-value parameter. If |
dschulze@4491 | 1914 | <em><ty></em> is not provided, ty has zero as a value. |
vhardy@3672 | 1915 | |
simon@4365 | 1916 | <dt> <code class=css>translateX(<translation-value>)</code> |
vhardy@3672 | 1917 | |
dschulze@4491 | 1918 | <dd> specifies a <a href="#TranslateDefined">translation</a> by the given |
dschulze@4491 | 1919 | amount in the X direction. |
vhardy@3672 | 1920 | |
simon@4365 | 1921 | <dt> <code class=css>translateY(<translation-value>)</code> |
vhardy@3672 | 1922 | |
dschulze@4491 | 1923 | <dd> specifies a <a href="#TranslateDefined">translation</a> by the given |
dschulze@4491 | 1924 | amount in the Y direction. |
vhardy@3672 | 1925 | |
simon@4365 | 1926 | <dt> <code class=css>scale(<number>[, <number>])</code> |
vhardy@3672 | 1927 | |
dschulze@4491 | 1928 | <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation by the |
dschulze@4491 | 1929 | [sx,sy] scaling vector described by the 2 parameters. If the second |
dschulze@4491 | 1930 | parameter is not provided, it is takes a value equal to the first. For |
dschulze@4491 | 1931 | example, scale(1, 1) would leave an element unchanged, while scale(2, 2) |
dschulze@4491 | 1932 | would cause it to appear twice as long in both the X and Y axes, or four |
dschulze@4491 | 1933 | times its typical geometric size. |
vhardy@3672 | 1934 | |
simon@4365 | 1935 | <dt> <code class=css>scaleX(<number>)</code> |
vhardy@3672 | 1936 | |
dschulze@4491 | 1937 | <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the |
dschulze@4491 | 1938 | [sx,1] scaling vector, where sx is given as the parameter. |
vhardy@3672 | 1939 | |
simon@4365 | 1940 | <dt> <code class=css>scaleY(<number>)</code> |
vhardy@3672 | 1941 | |
dschulze@4491 | 1942 | <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the |
dschulze@4491 | 1943 | [1,sy] scaling vector, where sy is given as the parameter. |
vhardy@3672 | 1944 | |
dschulze@4598 | 1945 | <dt> <code class=css>rotate(<angle>)</code> |
vhardy@3672 | 1946 | |
dschulze@4491 | 1947 | <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle |
dschulze@4491 | 1948 | specified in the parameter about the origin of the element, as defined by |
dschulze@4602 | 1949 | the ‘<a href="#transform-origin"><code class=css><code |
dschulze@4602 | 1950 | class=property>transform-origin</code></code></a>’ property. For |
dschulze@4602 | 1951 | example, ‘<code class=css><code |
dschulze@4602 | 1952 | class=css>rotate(90deg)</code></code>’ would cause elements to |
dschulze@4602 | 1953 | appear rotated one-quarter of a turn in the clockwise direction. |
dschulze@4491 | 1954 | |
dschulze@4491 | 1955 | <dt> <code class=css>skew(<angle>[, <angle>])</code> |
dschulze@4491 | 1956 | |
dschulze@4491 | 1957 | <dd> specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and |
dschulze@4491 | 1958 | Y. If the second parameter is not provided, it is has a zero value. |
simon@4399 | 1959 | |
simon@4365 | 1960 | <dt> <code class=css>skewX(<angle>)</code> |
vhardy@3672 | 1961 | |
dschulze@4491 | 1962 | <dd> specifies a <a href="#SkewDefined">2D skew transformation along the X |
dschulze@4491 | 1963 | axis</a> by the given angle. The skew vector is [ax,0]. |
vhardy@3672 | 1964 | |
simon@4365 | 1965 | <dt> <code class=css>skewY(<angle>)</code> |
vhardy@3672 | 1966 | |
dschulze@4491 | 1967 | <dd> specifies a <a href="#SkewDefined">2D skew transformation along the Y |
dschulze@4491 | 1968 | axis</a> by the given angle. The skew vector is [0,ay]. |
vhardy@3672 | 1969 | </dl> |
vhardy@3672 | 1970 | |
dschulze@4598 | 1971 | <h3 id=three-d-transform-functions><span class=secno>13.2. </span>3D |
simon@4358 | 1972 | Transformation Functions</h3> |
simon@4358 | 1973 | |
simon@4358 | 1974 | <dl> |
simon@4365 | 1975 | <dt> <code class=css>matrix3d(<number>, <number>, |
simon@4358 | 1976 | <number>, <number>, <number>, <number>, |
simon@4358 | 1977 | <number>, <number>, <number>, <number>, |
simon@4358 | 1978 | <number>, <number>, <number>, <number>, |
simon@4365 | 1979 | <number>, <number>)</code> |
simon@4358 | 1980 | |
simon@4358 | 1981 | <dd> specifies a 3D transformation as a 4x4 homogeneous matrix of 16 |
simon@4358 | 1982 | values in column-major order. |
simon@4358 | 1983 | |
simon@4365 | 1984 | <dt> <code class=css>translate3d(<translation-value>, |
dschulze@4483 | 1985 | <translation-value>, <length>)</code> |
simon@4358 | 1986 | |
dschulze@4491 | 1987 | <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the |
dschulze@4491 | 1988 | vector [tx,ty,tz], with tx, ty and tz being the first, second and third |
dschulze@4491 | 1989 | translation-value parameters respectively. |
dschulze@4483 | 1990 | |
dschulze@4483 | 1991 | <dt> <code class=css>translateZ(<length>)</code> |
dschulze@4483 | 1992 | |
dschulze@4491 | 1993 | <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the |
dschulze@4491 | 1994 | vector [0,0,tz] with the given amount in the Z direction. |
simon@4358 | 1995 | |
simon@4365 | 1996 | <dt> <code class=css>scale3d(<number>, <number>, |
simon@4365 | 1997 | <number>)</code> |
simon@4358 | 1998 | |
dschulze@4491 | 1999 | <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation by the |
dschulze@4491 | 2000 | [sx,sy,sz] scaling vector described by the 3 parameters. |
simon@4358 | 2001 | |
simon@4365 | 2002 | <dt> <code class=css>scaleZ(<number>)</code> |
simon@4358 | 2003 | |
dschulze@4491 | 2004 | <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation using |
dschulze@4491 | 2005 | the [1,1,sz] scaling vector, where sz is given as the parameter. |
simon@4358 | 2006 | |
simon@4365 | 2007 | <dt> <code class=css>rotate3d(<number>, <number>, |
simon@4365 | 2008 | <number>, <angle>)</code> |
simon@4358 | 2009 | </dl> |
simon@4358 | 2010 | |
simon@4358 | 2011 | <div class=todo>Clarify "clockwise". Describe in terms of right-hand rule?</div> |
simon@4358 | 2012 | |
simon@4358 | 2013 | <dl> |
dschulze@4491 | 2014 | <dd> specifies a clockwise <a href="#Rotate3dDefined">3D rotation</a> by |
dschulze@4491 | 2015 | the angle specified in last parameter about the [x,y,z] direction vector |
dschulze@4491 | 2016 | described by the first 3 parameters. If the direction vector is not of |
dschulze@4491 | 2017 | unit length, it will be normalized. A direction vector that cannot be |
dschulze@4491 | 2018 | normalized, such as [0,0,0], will cause the rotation to not be applied. |
simon@4358 | 2019 | |
simon@4365 | 2020 | <dt> <code class=css>rotateX(<angle>)</code> |
simon@4358 | 2021 | |
dschulze@4491 | 2022 | <dd> specifies a clockwise <a href="#RotateXDefined">3D rotation</a> by |
dschulze@4491 | 2023 | the given angle about the X axis. |
simon@4358 | 2024 | |
simon@4365 | 2025 | <dt> <code class=css>rotateY(<angle>)</code> |
simon@4358 | 2026 | |
dschulze@4491 | 2027 | <dd> specifies a clockwise <a href="#RotateYDefined">3D rotation</a> by |
dschulze@4491 | 2028 | the given angle about the Y axis. |
simon@4358 | 2029 | |
simon@4365 | 2030 | <dt> <code class=css>rotateZ(<angle>)</code> |
simon@4358 | 2031 | |
dschulze@4491 | 2032 | <dd> specifies a clockwise <a href="#RotateZDefined">3D rotation</a> by |
dschulze@4491 | 2033 | the given angle about the Z axis. This is a synonym for <code |
dschulze@4491 | 2034 | class=css>rotate(<angle>)</code>. |
simon@4365 | 2035 | |
simon@4577 | 2036 | <dt id=perspective-function> <code |
simon@4577 | 2037 | class=css>perspective(<length>)</code> |
simon@4358 | 2038 | |
dschulze@4491 | 2039 | <dd> specifies a <a href="#PerspectiveDefined">perspective projection |
dschulze@4491 | 2040 | matrix</a>. This matrix scales points in X and Y based on their Z value, |
dschulze@4491 | 2041 | scaling points with positive Z values away from the origin, and those |
dschulze@4491 | 2042 | with negative Z values towards the origin. Points on the z=0 plane are |
simon@4700 | 2043 | unchanged. The parameter represents the distance of the z=0 plane from |
simon@4700 | 2044 | the viewer. Lower values give a more flattened pyramid and therefore a |
simon@4700 | 2045 | more pronounced perspective effect. For example, a value of 1000px gives |
simon@4700 | 2046 | a moderate amount of foreshortening and a value of 200px gives an extreme |
simon@4700 | 2047 | amount. The value for depth must be greater than zero, otherwise the |
simon@4700 | 2048 | function is invalid. |
simon@4358 | 2049 | </dl> |
simon@4358 | 2050 | <!-- ======================================================================================================= --> |
simon@4358 | 2051 | |
dschulze@4598 | 2052 | <h2 id=transform-values><span class=secno>14. </span> Transform Values and |
vhardy@3672 | 2053 | Lists</h2> |
vhardy@3672 | 2054 | |
vhardy@3672 | 2055 | <p> The <translation-value> values are defined as [<percentage> |
vhardy@3672 | 2056 | | <length>]. All other value types are described <a |
vhardy@3672 | 2057 | href="http://www.w3.org/TR/REC-CSS2/syndata.html#values">as CSS types</a>. |
vhardy@3672 | 2058 | If a list of transforms is provided, then the net effect is as if each |
vhardy@3672 | 2059 | transform had been specified separately in the order provided. For |
vhardy@3672 | 2060 | example, |
vhardy@3672 | 2061 | |
vhardy@3672 | 2062 | <pre> |
simon@4358 | 2063 | <div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/> |
simon@4358 | 2064 | </pre> |
vhardy@3672 | 2065 | |
vhardy@3672 | 2066 | <p> is functionally equivalent to: |
vhardy@3672 | 2067 | |
vhardy@3672 | 2068 | <pre> |
simon@4358 | 2069 | <div style="transform:translate(-10px,-20px)"> |
simon@4358 | 2070 | <div style="transform:scale(2)"> |
simon@4358 | 2071 | <div style="transform:rotate(45deg)"> |
simon@4358 | 2072 | <div style="transform:translate(5px,10px)"> |
simon@4358 | 2073 | </div> |
simon@4358 | 2074 | </div> |
simon@4358 | 2075 | </div> |
simon@4358 | 2076 | </div> |
simon@4358 | 2077 | </pre> |
vhardy@3672 | 2078 | |
vhardy@3672 | 2079 | <p> That is, in the absence of other styling that affects position and |
vhardy@3672 | 2080 | dimensions, a nested set of transforms is equivalent to a single list of |
vhardy@3672 | 2081 | transform functions, applied from the outside in. The resulting transform |
simon@4358 | 2082 | is the matrix multiplication of the list of transforms.</p> |
vhardy@3672 | 2083 | <!-- ======================================================================================================= --> |
vhardy@3672 | 2084 | |
dschulze@4598 | 2085 | <h2 id=animation><span class=secno>15. </span> Transitions and Animations |
dschulze@4511 | 2086 | between Transform Values</h2> |
vhardy@3672 | 2087 | |
vhardy@3672 | 2088 | <p> When animating or transitioning the value of a transform property the |
vhardy@3672 | 2089 | rules described below are applied. The ‘<code |
vhardy@3672 | 2090 | class=property>from</code>’ transform is the transform at the start |
vhardy@3672 | 2091 | of the transition or current keyframe. The ‘<code |
vhardy@3672 | 2092 | class=property>end</code>’ transform is the transform at the end of |
vhardy@3672 | 2093 | the transition or current keyframe. |
vhardy@3672 | 2094 | |
vhardy@3672 | 2095 | <ul> |
vhardy@3672 | 2096 | <li> If the ‘<code class=property>from</code>’ and |
vhardy@3672 | 2097 | ‘<code class=property>to</code>’ transforms are both single |
vhardy@3672 | 2098 | functions of the same type: |
vhardy@3672 | 2099 | <ul> |
dschulze@4484 | 2100 | <li> For translate, translate3d, translateX, translateY, translateZ, |
dschulze@4484 | 2101 | scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotateX, rotateY, |
dschulze@4484 | 2102 | rotateZ, skew, skewX and skewY functions: |
vhardy@3672 | 2103 | <ul> |
vhardy@3672 | 2104 | <li> the individual components of the function are interpolated |
vhardy@3672 | 2105 | numerically. |
vhardy@3672 | 2106 | </ul> |
vhardy@3672 | 2107 | |
dschulze@4484 | 2108 | <li> For perspective, matrix, matrix3d and rotate3d: |
vhardy@3672 | 2109 | <ul> |
dschulze@4484 | 2110 | <li> the values are first converted to a 4x4 matrix, then decomposed |
dschulze@4484 | 2111 | using <a href="#unmatrix">the method described by unmatrix</a> into |
dschulze@4484 | 2112 | separate translation, scale, rotation, skew and perspective matrices, |
dschulze@4484 | 2113 | then each decomposed matrix is interpolated numerically, and finally |
dschulze@4484 | 2114 | combined in order to produce a resulting 4x4 matrix. |
vhardy@3672 | 2115 | </ul> |
vhardy@3672 | 2116 | </ul> |
vhardy@3672 | 2117 | |
vhardy@3672 | 2118 | <li> If both the ‘<code class=property>from</code>’ and |
vhardy@3672 | 2119 | ‘<code class=property>to</code>’ transforms are "none": |
vhardy@3672 | 2120 | <ul> |
vhardy@3672 | 2121 | <li> There is no interpolation necessary |
vhardy@3672 | 2122 | </ul> |
vhardy@3672 | 2123 | |
vhardy@3672 | 2124 | <li> If one of the ‘<code class=property>from</code>’ or |
vhardy@3672 | 2125 | ‘<code class=property>to</code>’ transforms is "none": |
vhardy@3672 | 2126 | <ul> |
vhardy@3672 | 2127 | <li> The ‘<code class=property>none</code>’ is replaced by |
vhardy@3672 | 2128 | an equivalent identity function list for the corresponding transform |
vhardy@3672 | 2129 | function list. |
vhardy@3672 | 2130 | <p> For example, if the ‘<code class=property>from</code>’ |
vhardy@3672 | 2131 | transform is "scale(2)" and the ‘<code |
vhardy@3672 | 2132 | class=property>to</code>’ transform is "none" then the value |
vhardy@3672 | 2133 | "scale(1)" will be used as the ‘<code |
vhardy@3672 | 2134 | class=property>to</code>’ value, and animation will proceed |
vhardy@3672 | 2135 | using the rule above. Similarly, if the ‘<code |
vhardy@3672 | 2136 | class=property>from</code>’ transform is "none" and the |
vhardy@3672 | 2137 | ‘<code class=property>to</code>’ transform is "scale(2) |
vhardy@3672 | 2138 | rotate(50deg)" then the animation will execute as if the ‘<code |
vhardy@3672 | 2139 | class=property>from</code>’ value is "scale(1) rotate(0)".</p> |
vhardy@3672 | 2140 | |
dschulze@4484 | 2141 | <p> The identity functions are translate(0), translate3d(0, 0, 0), |
dschulze@4484 | 2142 | translateX(0), translateY(0), translateZ(0), scale(1), scale3d(1, 1, |
dschulze@4484 | 2143 | 1), scaleX(1), scaleY(1), scaleZ(1), rotate(0), rotate3d(1, 1, 1, 0), |
dschulze@4484 | 2144 | rotateX(0), rotateY(0), rotateZ(0), skew(0), skewX(0), skewY(0), |
dschulze@4484 | 2145 | matrix(1, 0, 0, 1, 0, 0) and matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, |
dschulze@4484 | 2146 | 0, 0, 0, 0, 1).</p> |
vhardy@3672 | 2147 | </ul> |
vhardy@3672 | 2148 | |
vhardy@3672 | 2149 | <li> If both the ‘<code class=property>from</code>’ and |
vhardy@3672 | 2150 | ‘<code class=property>to</code>’ transforms have the same |
vhardy@3672 | 2151 | number of transform functions and corresponding functions in each |
vhardy@3672 | 2152 | transform list are of the same type: |
vhardy@3672 | 2153 | <ul> |
vhardy@3672 | 2154 | <li> Each transform function is animated with its corresponding |
vhardy@3672 | 2155 | destination function in isolation using the rules described above. The |
dschulze@4484 | 2156 | individual values are then applied as a list to produce resulting |
vhardy@3672 | 2157 | transform value. |
vhardy@3672 | 2158 | </ul> |
vhardy@3672 | 2159 | |
vhardy@3672 | 2160 | <li> Otherwise: |
vhardy@3672 | 2161 | <ul> |
vhardy@3672 | 2162 | <li> The transform function lists are each converted into the equivalent |
dschulze@4484 | 2163 | matrix3d value and animation proceeds using the rule for a single |
vhardy@3672 | 2164 | function above. |
vhardy@3672 | 2165 | </ul> |
vhardy@3672 | 2166 | </ul> |
vhardy@3672 | 2167 | |
vhardy@3672 | 2168 | <p> In some cases, an animation might cause a transformation matrix to be |
vhardy@3672 | 2169 | singular or non-invertible. For example, an animation in which scale moves |
vhardy@3672 | 2170 | from 1 to -1. At the time when the matrix is in such a state, the |
vhardy@3672 | 2171 | transformed element is not rendered. |
vhardy@3672 | 2172 | |
dschulze@4598 | 2173 | <h2 id=matrix-decomposition><span class=secno>16. </span> Matrix |
dschulze@4511 | 2174 | Decomposition for Animation</h2> |
vhardy@3672 | 2175 | |
vhardy@3672 | 2176 | <p> When interpolating between 2 matrices, each is decomposed into the |
dschulze@4484 | 2177 | corresponding translation, rotation, scale, skew and perspective values. |
dschulze@4484 | 2178 | Not all matrices can be accurately described by these values. Those that |
dschulze@4484 | 2179 | can't are decomposed into the most accurate representation possible, using |
dschulze@4484 | 2180 | the technique below. This technique is taken from the "unmatrix" method in |
dschulze@4484 | 2181 | "Graphics Gems II, edited by Jim Arvo". The pseudocode below works on a |
dschulze@4493 | 2182 | 4x4 homogeneous matrix. |
vhardy@3672 | 2183 | |
dschulze@4598 | 2184 | <h3 id=unmatrix><span class=secno>16.1. </span>Unmatrix</h3> |
vhardy@3672 | 2185 | |
vhardy@3672 | 2186 | <pre> |
dschulze@4484 | 2187 | Input: matrix ; a 4x4 matrix |
dschulze@4484 | 2188 | Output: translation ; a 3 component vector |
dschulze@4484 | 2189 | rotation ; Euler angles, represented as a 3 component vector |
dschulze@4484 | 2190 | scale ; a 3 component vector |
dschulze@4484 | 2191 | skew ; skew factors XY,XZ,YZ represented as a 3 component vector |
dschulze@4484 | 2192 | perspective ; a 4 component vector |
vhardy@3672 | 2193 | Returns false if the matrix cannot be decomposed, true if it can |
vhardy@3672 | 2194 | |
dschulze@4484 | 2195 | Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix): |
dschulze@4484 | 2196 | double determinant(matrix) returns the 4x4 determinant of the matrix |
dschulze@4484 | 2197 | matrix inverse(matrix) returns the inverse of the passed matrix |
dschulze@4484 | 2198 | matrix transpose(matrix) returns the transpose of the passed matrix |
dschulze@4484 | 2199 | point multVecMatrix(point, matrix) multiplies the passed point by the passed matrix |
dschulze@4484 | 2200 | and returns the transformed point |
dschulze@4484 | 2201 | double length(point) returns the length of the passed vector |
vhardy@3672 | 2202 | point normalize(point) normalizes the length of the passed point to 1 |
dschulze@4484 | 2203 | double dot(point, point) returns the dot product of the passed points |
dschulze@4484 | 2204 | double cos(double) returns the cosine of the passed angle in radians |
dschulze@4484 | 2205 | double asin(double) returns the arcsine in radians of the passed value |
dschulze@4484 | 2206 | double atan2(double y, double x) returns the principal value of the arc tangent of |
vhardy@3672 | 2207 | y/x, using the signs of both arguments to determine |
vhardy@3672 | 2208 | the quadrant of the return value |
vhardy@3672 | 2209 | |
vhardy@3672 | 2210 | Decomposition also makes use of the following function: |
dschulze@4484 | 2211 | point combine(point a, point b, double ascl, double bscl) |
vhardy@3672 | 2212 | result[0] = (ascl * a[0]) + (bscl * b[0]) |
vhardy@3672 | 2213 | result[1] = (ascl * a[1]) + (bscl * b[1]) |
dschulze@4484 | 2214 | result[2] = (ascl * a[2]) + (bscl * b[2]) |
vhardy@3672 | 2215 | return result |
vhardy@3672 | 2216 | |
dschulze@4484 | 2217 | // Normalize the matrix. |
dschulze@4484 | 2218 | if (matrix[3][3] == 0) |
dschulze@4484 | 2219 | return false |
dschulze@4484 | 2220 | |
dschulze@4484 | 2221 | for (i = 0; i < 4; i++) |
dschulze@4484 | 2222 | for (j = 0; j < 4; j++) |
dschulze@4484 | 2223 | matrix[i][j] /= matrix[3][3] |
dschulze@4484 | 2224 | |
dschulze@4484 | 2225 | // perspectiveMatrix is used to solve for perspective, but it also provides |
dschulze@4484 | 2226 | // an easy way to test for singularity of the upper 3x3 component. |
dschulze@4484 | 2227 | perspectiveMatrix = matrix |
dschulze@4484 | 2228 | |
dschulze@4484 | 2229 | for (i = 0; i < 3; i++) |
dschulze@4484 | 2230 | perspectiveMatrix[i][3] = 0 |
dschulze@4484 | 2231 | |
dschulze@4484 | 2232 | perspectiveMatrix[3][3] = 1 |
dschulze@4484 | 2233 | |
dschulze@4484 | 2234 | if (determinant(perspectiveMatrix) == 0) |
dschulze@4484 | 2235 | return false |
dschulze@4484 | 2236 | |
dschulze@4484 | 2237 | // First, isolate perspective. |
dschulze@4484 | 2238 | if (matrix[0][3] != 0 || matrix[1][3] != 0 || matrix[2][3] != 0) |
dschulze@4484 | 2239 | // rightHandSide is the right hand side of the equation. |
dschulze@4484 | 2240 | rightHandSide[0] = matrix[0][3]; |
dschulze@4484 | 2241 | rightHandSide[1] = matrix[1][3]; |
dschulze@4484 | 2242 | rightHandSide[2] = matrix[2][3]; |
dschulze@4484 | 2243 | rightHandSide[3] = matrix[3][3]; |
dschulze@4484 | 2244 | |
dschulze@4484 | 2245 | // Solve the equation by inverting perspectiveMatrix and multiplying |
dschulze@4484 | 2246 | // rightHandSide by the inverse. |
dschulze@4484 | 2247 | inversePerspectiveMatrix = inverse(perspectiveMatrix) |
dschulze@4484 | 2248 | transposedInversePerspectiveMatrix = transposeMatrix4(inversePerspectiveMatrix) |
dschulze@4484 | 2249 | perspective = multVecMatrix(rightHandSide, transposedInversePerspectiveMatrix) |
dschulze@4484 | 2250 | |
dschulze@4484 | 2251 | // Clear the perspective partition |
dschulze@4484 | 2252 | matrix[0][3] = matrix[1][3] = matrix[2][3] = 0 |
dschulze@4484 | 2253 | matrix[3][3] = 1 |
dschulze@4484 | 2254 | else |
dschulze@4484 | 2255 | // No perspective. |
dschulze@4484 | 2256 | perspective[0] = perspective[1] = perspective[2] = 0 |
dschulze@4484 | 2257 | perspective[3] = 1 |
dschulze@4484 | 2258 | |
dschulze@4484 | 2259 | // Next take care of translation |
dschulze@4484 | 2260 | translate[0] = matrix[3][0] |
dschulze@4484 | 2261 | matrix[3][0] = 0 |
vhardy@3672 | 2262 | translate[1] = matrix[3][1] |
dschulze@4484 | 2263 | matrix[3][1] = 0 |
dschulze@4484 | 2264 | translate[2] = matrix[3][2] |
dschulze@4484 | 2265 | matrix[3][2] = 0 |
dschulze@4484 | 2266 | |
dschulze@4484 | 2267 | // Now get scale and shear. 'row' is a 3 element array of 3 component vectors |
dschulze@4484 | 2268 | for (i = 0; i < 3; i++) |
dschulze@4484 | 2269 | row[i][0] = matrix[i][0] |
dschulze@4484 | 2270 | row[i][1] = matrix[i][1] |
dschulze@4484 | 2271 | row[i][2] = matrix[i][2] |
vhardy@3672 | 2272 | |
vhardy@3672 | 2273 | // Compute X scale factor and normalize first row. |
vhardy@3672 | 2274 | scale[0] = length(row[0]) |
vhardy@3672 | 2275 | row[0] = normalize(row[0]) |
vhardy@3672 | 2276 | |
dschulze@4484 | 2277 | // Compute XY shear factor and make 2nd row orthogonal to 1st. |
dschulze@4484 | 2278 | skew[0] = dot(row[0], row[1]) |
dschulze@4484 | 2279 | row[1] = combine(row[1], row[0], 1.0, -skew[0]) |
vhardy@3672 | 2280 | |
vhardy@3672 | 2281 | // Now, compute Y scale and normalize 2nd row. |
vhardy@3672 | 2282 | scale[1] = length(row[1]) |
vhardy@3672 | 2283 | row[1] = normalize(row[1]) |
dschulze@4484 | 2284 | skew[0] /= scale[1]; |
dschulze@4484 | 2285 | |
dschulze@4484 | 2286 | // Compute XZ and YZ shears, orthogonalize 3rd row |
dschulze@4484 | 2287 | skew[1] = dot(row[0], row[2]) |
dschulze@4484 | 2288 | row[2] = combine(row[2], row[0], 1.0, -skew[1]) |
dschulze@4484 | 2289 | skew[2] = dot(row[1], row[2]) |
dschulze@4484 | 2290 | row[2] = combine(row[2], row[1], 1.0, -skew[2]) |
dschulze@4484 | 2291 | |
dschulze@4484 | 2292 | // Next, get Z scale and normalize 3rd row. |
dschulze@4484 | 2293 | scale[2] = length(row[2]) |
dschulze@4484 | 2294 | row[2] = normalize(row[2]) |
dschulze@4484 | 2295 | skew[1] /= scale[2] |
dschulze@4484 | 2296 | skew[2] /= scale[2] |
dschulze@4484 | 2297 | |
dschulze@4484 | 2298 | // At this point, the matrix (in rows) is orthonormal. |
dschulze@4484 | 2299 | // Check for a coordinate system flip. If the determinant |
dschulze@4484 | 2300 | // is -1, then negate the matrix and the scaling factors. |
dschulze@4484 | 2301 | pdum3 = cross(row[1], row[2]) |
dschulze@4484 | 2302 | if (dot(row[0], pdum3) < 0) |
dschulze@4484 | 2303 | for (i = 0; i < 3; i++) { |
dschulze@4484 | 2304 | scale[0] *= -1; |
dschulze@4484 | 2305 | row[i][0] *= -1 |
dschulze@4484 | 2306 | row[i][1] *= -1 |
dschulze@4484 | 2307 | row[i][2] *= -1 |
dschulze@4484 | 2308 | |
dschulze@4484 | 2309 | // Now, get the rotations ou |
dschulze@4484 | 2310 | rotate[1] = asin(-row[0][2]); |
dschulze@4484 | 2311 | if (cos(rotate[1]) != 0) |
dschulze@4484 | 2312 | rotate[0] = atan2(row[1][2], row[2][2]); |
dschulze@4484 | 2313 | rotate[2] = atan2(row[0][1], row[0][0]); |
dschulze@4484 | 2314 | else |
dschulze@4484 | 2315 | rotate[0] = atan2(-row[2][0], row[1][1]); |
dschulze@4484 | 2316 | rotate[2] = 0; |
vhardy@3672 | 2317 | |
vhardy@3672 | 2318 | return true;</pre> |
vhardy@3672 | 2319 | |
dschulze@4598 | 2320 | <h3 id=animating-the-components><span class=secno>16.2. </span>Animating |
simon@4345 | 2321 | the components</h3> |
vhardy@3672 | 2322 | |
vhardy@3672 | 2323 | <p> Once decomposed, each component of each returned value of the source |
vhardy@3672 | 2324 | matrix is linearly interpolated with the corresponding component of the |
vhardy@3672 | 2325 | destination matrix. For instance, the translate[0] and translate[1] values |
vhardy@3672 | 2326 | are interpolated numerically, and the result is used to set the |
vhardy@3672 | 2327 | translation of the animating element. |
vhardy@3672 | 2328 | |
dschulze@4598 | 2329 | <h3 id=recomposing-the-matrix><span class=secno>16.3. </span>Recomposing |
simon@4345 | 2330 | the matrix</h3> |
vhardy@3672 | 2331 | |
vhardy@3672 | 2332 | <p><em>This section is not normative.</em> |
vhardy@3672 | 2333 | |
vhardy@3672 | 2334 | <p> After interpolation the resulting values are used to position the |
dschulze@4484 | 2335 | element. One way to use these values is to recompose them into a 4x4 |
dschulze@4602 | 2336 | matrix. This can be done using the transform functions of the ‘<a |
dschulze@4602 | 2337 | href="#effects"><code class=property>transform</code></a>’ property. |
dschulze@4602 | 2338 | This can be done by the following pseudo code. The values passed in are |
dschulze@4602 | 2339 | the output of the Unmatrix function above: |
vhardy@3672 | 2340 | |
vhardy@3672 | 2341 | <pre> |
dschulze@4484 | 2342 | matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, perspective[0], perspective[1], perspective[2], perspective[3]) |
dschulze@4484 | 2343 | translate3d(translation[0], translation[1], translation[2]) |
dschulze@4484 | 2344 | rotateX(rotation[0]) rotateY(rotation[1]) rotateZ(rotation[2]) |
dschulze@4484 | 2345 | matrix3d(1,0,0,0, 0,1,0,0, 0,skew[2],1,0, 0,0,0,1) |
dschulze@4484 | 2346 | matrix3d(1,0,0,0, 0,1,0,0, skew[1],0,1,0, 0,0,0,1) |
dschulze@4484 | 2347 | matrix3d(1,0,0,0, skew[0],1,0,0, 0,0,1,0, 0,0,0,1) |
dschulze@4484 | 2348 | scale3d(scale[0], scale[1], scale[2])</pre> |
vhardy@3672 | 2349 | |
dschulze@4598 | 2350 | <h2 id=mathematical-description><span class=secno>17. </span> Mathematical |
dschulze@4511 | 2351 | Description of Transformation Functions</h2> |
dschulze@4491 | 2352 | |
dschulze@4601 | 2353 | <p> Mathematically, all transform functions can be represented as 4x4 |
dschulze@4491 | 2354 | transformation matrices of the following form: |
dschulze@4491 | 2355 | |
simon@4583 | 2356 | <p><img |
simon@4583 | 2357 | alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}" |
simon@4583 | 2358 | height=106 src=4x4matrix.png width=222> |
dschulze@4491 | 2359 | |
dschulze@4491 | 2360 | <ul> |
dschulze@4491 | 2361 | <li id=MatrixDefined> |
dschulze@4491 | 2362 | <p> A 2D 3x2 matrix with six parameters <em>a</em>, <em>b</em>, |
dschulze@4491 | 2363 | <em>c</em>, <em>d</em>, <em>e</em> and <em>f</em> is equivalent to to |
dschulze@4491 | 2364 | the matrix:</p> |
simon@4583 | 2365 | <img |
simon@4583 | 2366 | alt="\begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2367 | height=106 src=matrix.png width=108> |
dschulze@4491 | 2368 | |
dschulze@4491 | 2369 | <li id=TranslateDefined> |
dschulze@4491 | 2370 | <p> A 2D translation with the parameters <em>tx</em> and <em>ty</em> is |
dschulze@4491 | 2371 | equivalent to a <a href="#Translate3dDefined">3D translation</a> where |
dschulze@4491 | 2372 | <em>tz</em> has zero as a value.</p> |
dschulze@4491 | 2373 | |
dschulze@4491 | 2374 | <li id=ScaleDefined> |
dschulze@4491 | 2375 | <p> A 2D scaling with the parameters <em>sx</em> and <em>sy</em> is |
dschulze@4491 | 2376 | equivalent to a <a href="#Scale3dDefined">3D scale</a> where <em>sz</em> |
dschulze@4491 | 2377 | has one as a value.</p> |
dschulze@4491 | 2378 | |
dschulze@4491 | 2379 | <li id=RotateDefined> |
dschulze@4491 | 2380 | <p> A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a |
dschulze@4491 | 2381 | href="#RotateZDefined">rotation around the Z axis</a>.</p> |
dschulze@4491 | 2382 | |
dschulze@4491 | 2383 | <li id=SkewDefined> |
dschulze@4491 | 2384 | <p> A 2D skew transformation with the parameters <em>alpha</em> and |
dschulze@4491 | 2385 | <em>beta</em> is equivalent to the matrix:</p> |
simon@4583 | 2386 | <img |
simon@4583 | 2387 | alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2388 | height=106 src=skew.png width=205> |
dschulze@4491 | 2389 | |
dschulze@4491 | 2390 | <li id=Translate3dDefined> |
dschulze@4491 | 2391 | <p> A 3D translation with the parameters <em>tx</em>, <em>ty</em> and |
dschulze@4491 | 2392 | <em>tz</em> is equivalent to the matrix:</p> |
simon@4584 | 2393 | <img |
simon@4584 | 2394 | alt="\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4584 | 2395 | height=106 src=translate3d.png width=114> |
dschulze@4491 | 2396 | |
dschulze@4491 | 2397 | <li id=Scale3dDefined> |
dschulze@4491 | 2398 | <p> A 3D scaling with the parameters <em>sx</em>, <em>sy</em> and |
dschulze@4491 | 2399 | <em>sz</em> is equivalent to the matrix:</p> |
simon@4583 | 2400 | <img |
simon@4583 | 2401 | alt="\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2402 | height=106 src=scale3d.png width=137> |
dschulze@4491 | 2403 | |
dschulze@4491 | 2404 | <li id=Rotate3dDefined> |
dschulze@4491 | 2405 | <p> A 3D rotation with the vector [x,y,z] and the parameter |
dschulze@4491 | 2406 | <em>alpha</em> is equivalent to the matrix:</p> |
simon@4583 | 2407 | <img |
simon@4583 | 2408 | alt="\begin{bmatrix} 1 - 2 \cdot (y^2 + z^2) \cdot sq & 2 \cdot (x \cdot y \cdot sq - z \cdot sc) & 2 \cdot (x \cdot z \cdot sq + y \cdot sc) & 0 \\ 2 \cdot (x \cdot y \cdot sq + z \cdot sc) & 1 - 2 \cdot (x^2 + z^2) \cdot sq & 2 \cdot (y \cdot z \cdot sq - x \cdot sc) & 0 \\ 2 \cdot (x \cdot z \cdot sq - y \cdot sc) & 2 \cdot (y \cdot z \cdot sq + x \cdot sc) & 1 - 2 \cdot (x^2 + y^2) \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2409 | height=106 src=rotate3dmatrix.png width=647> |
dschulze@4491 | 2410 | <p> where:</p> |
simon@4584 | 2411 | <img |
simon@4584 | 2412 | alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)" |
simon@4584 | 2413 | height=50 src=rotate3dvariables.png width=221> |
dschulze@4491 | 2414 | |
dschulze@4491 | 2415 | <li id=RotateXDefined> |
dschulze@4491 | 2416 | <p> A 3D rotation about the X axis with the parameter <em>alpha</em> is |
dschulze@4491 | 2417 | equivalent to the matrix:</p> |
simon@4583 | 2418 | <img |
simon@4583 | 2419 | alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\alpha) & -\sin(\alpha) & 0 \\ 0 & \sin(\alpha) & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2420 | height=106 src=rotateX.png width=220> |
dschulze@4491 | 2421 | |
dschulze@4491 | 2422 | <li id=RotateYDefined> |
dschulze@4491 | 2423 | <p> A 3D rotation about the Y axis with the parameter <em>alpha</em> is |
dschulze@4491 | 2424 | equivalent to the matrix:</p> |
simon@4583 | 2425 | <img |
simon@4583 | 2426 | alt="\begin{bmatrix} \cos(\alpha) & 0 & \sin(\alpha) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\alpha) & 0 & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2427 | height=106 src=rotateY.png width=220> |
dschulze@4491 | 2428 | |
dschulze@4491 | 2429 | <li id=RotateZDefined> |
dschulze@4491 | 2430 | <p> A 3D rotation about the Z axis with the parameter <em>alpha</em> is |
dschulze@4491 | 2431 | equivalent to the matrix:</p> |
simon@4583 | 2432 | <img |
simon@4583 | 2433 | alt="\begin{bmatrix} \cos(\alpha) & -\sin(\alpha) & 0 & 0 \\ \sin(\alpha) & \cos(\alpha) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" |
simon@4583 | 2434 | height=106 src=rotateZ.png width=220> |
dschulze@4491 | 2435 | |
dschulze@4491 | 2436 | <li id=PerspectiveDefined> |
dschulze@4491 | 2437 | <p> A perspective projection matrix with the parameter <em>d</em> is |
dschulze@4491 | 2438 | equivalent to the matrix:</p> |
simon@4583 | 2439 | <img |
simon@4583 | 2440 | alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}" |
simon@4583 | 2441 | height=106 src=perspective.png width=143> |
dschulze@4491 | 2442 | </ul> |
dschulze@4491 | 2443 | |
dschulze@4598 | 2444 | <h2 id=references><span class=secno>18. </span>References</h2> |
vhardy@3672 | 2445 | |
vhardy@3672 | 2446 | <h3 class=no-num id=normative-references>Normative references</h3> |
vhardy@3672 | 2447 | <!--begin-normative--> |
vhardy@3672 | 2448 | <!-- Sorted by label --> |
vhardy@3672 | 2449 | |
vhardy@3672 | 2450 | <dl class=bibliography> |
vhardy@3672 | 2451 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
vhardy@3672 | 2452 | <!----> |
vhardy@3672 | 2453 | </dl> |
vhardy@3672 | 2454 | <!--end-normative--> |
vhardy@3672 | 2455 | |
vhardy@3672 | 2456 | <h3 class=no-num id=other-references>Other references</h3> |
vhardy@3672 | 2457 | <!--begin-informative--> |
vhardy@3672 | 2458 | <!-- Sorted by label --> |
vhardy@3672 | 2459 | |
vhardy@3672 | 2460 | <dl class=bibliography> |
vhardy@3672 | 2461 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
vhardy@3672 | 2462 | <!----> |
dschulze@4323 | 2463 | |
dschulze@4323 | 2464 | <dt id=SVG11>[SVG11] |
dschulze@4323 | 2465 | |
dschulze@4323 | 2466 | <dd>Erik Dahlström; et al. <a |
dschulze@4323 | 2467 | href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable |
dschulze@4323 | 2468 | Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. |
dschulze@4323 | 2469 | W3C Recommendation. URL: <a |
dschulze@4323 | 2470 | href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> |
dschulze@4323 | 2471 | </dd> |
dschulze@4323 | 2472 | <!----> |
vhardy@3672 | 2473 | </dl> |
vhardy@3672 | 2474 | <!--end-informative--> |
vhardy@3672 | 2475 | |
vhardy@3672 | 2476 | <h2 class=no-num id=property-index>Property index</h2> |
vhardy@3672 | 2477 | <!--begin-properties--> |
vhardy@3672 | 2478 | |
vhardy@3672 | 2479 | <table class=proptable> |
vhardy@3672 | 2480 | <thead> |
vhardy@3672 | 2481 | <tr> |
vhardy@3672 | 2482 | <th>Property |
vhardy@3672 | 2483 | |
vhardy@3672 | 2484 | <th>Values |
vhardy@3672 | 2485 | |
vhardy@3672 | 2486 | <th>Initial |
vhardy@3672 | 2487 | |
vhardy@3672 | 2488 | <th>Applies to |
vhardy@3672 | 2489 | |
vhardy@3672 | 2490 | <th>Inh. |
vhardy@3672 | 2491 | |
vhardy@3672 | 2492 | <th>Percentages |
vhardy@3672 | 2493 | |
vhardy@3672 | 2494 | <th>Media |
vhardy@3672 | 2495 | |
vhardy@3672 | 2496 | <tbody> |
vhardy@3672 | 2497 | <tr> |
simon@4345 | 2498 | <th><a class=property |
simon@4345 | 2499 | href="#backface-visibility">backface-visibility</a> |
simon@4345 | 2500 | |
simon@4345 | 2501 | <td>visible | hidden |
simon@4345 | 2502 | |
simon@4345 | 2503 | <td>visible |
simon@4345 | 2504 | |
simon@4366 | 2505 | <td>transformable elements |
simon@4345 | 2506 | |
simon@4345 | 2507 | <td>no |
simon@4345 | 2508 | |
simon@4345 | 2509 | <td>N/A |
simon@4345 | 2510 | |
simon@4345 | 2511 | <td>visual |
simon@4345 | 2512 | |
simon@4345 | 2513 | <tr> |
simon@4345 | 2514 | <th><a class=property href="#perspective">perspective</a> |
simon@4345 | 2515 | |
simon@4345 | 2516 | <td>none | <length> |
simon@4345 | 2517 | |
simon@4345 | 2518 | <td>none |
simon@4345 | 2519 | |
simon@4345 | 2520 | <td>transformable elements |
simon@4345 | 2521 | |
simon@4345 | 2522 | <td>no |
simon@4345 | 2523 | |
simon@4345 | 2524 | <td>N/A |
simon@4345 | 2525 | |
simon@4345 | 2526 | <td>visual |
simon@4345 | 2527 | |
simon@4345 | 2528 | <tr> |
simon@4345 | 2529 | <th><a class=property href="#perspective-origin">perspective-origin</a> |
simon@4345 | 2530 | |
simon@4345 | 2531 | <td>[ [ <percentage> | <length> | left | center | right ] [ |
simon@4345 | 2532 | <percentage> | <length> | top | center | bottom ]? ] | [ [ |
simon@4345 | 2533 | left | center | right ] || [ top | center | bottom ] ] |
simon@4345 | 2534 | |
simon@4345 | 2535 | <td>50% 50% |
simon@4345 | 2536 | |
simon@4345 | 2537 | <td>transformable elements |
simon@4345 | 2538 | |
simon@4345 | 2539 | <td>no |
simon@4345 | 2540 | |
dschulze@4483 | 2541 | <td>refer to the size of the element's bounding box |
simon@4345 | 2542 | |
simon@4345 | 2543 | <td>visual |
simon@4345 | 2544 | |
simon@4345 | 2545 | <tr> |
vhardy@3672 | 2546 | <th><a class=property href="#effects">transform</a> |
vhardy@3672 | 2547 | |
vhardy@3672 | 2548 | <td>none | <transform-function> [ <transform-function> ]* |
vhardy@3672 | 2549 | |
vhardy@3672 | 2550 | <td>none |
vhardy@3672 | 2551 | |
dschulze@4323 | 2552 | <td>transformable elements |
vhardy@3672 | 2553 | |
vhardy@3672 | 2554 | <td>no |
vhardy@3672 | 2555 | |
dschulze@4483 | 2556 | <td>refer to the size of the element's bounding box |
vhardy@3672 | 2557 | |
vhardy@3672 | 2558 | <td>visual |
vhardy@3672 | 2559 | |
vhardy@3672 | 2560 | <tr> |
vhardy@3672 | 2561 | <th><a class=property href="#transform-origin">transform-origin</a> |
vhardy@3672 | 2562 | |
ayg@4703 | 2563 | <td>[ <percentage> | <length> | left | center | right | top | |
ayg@4703 | 2564 | bottom] | [ [ <percentage> | <length> | left | |
ayg@4703 | 2565 | center | right ] && [ <percentage> | |
ayg@4703 | 2566 | <length> | top | center | bottom ] ] <length>? |
vhardy@3672 | 2567 | |
dschulze@4483 | 2568 | <td>0 0 for SVG elements without associated CSS layout box, 50% 50% for |
dschulze@4483 | 2569 | all other elements |
vhardy@3672 | 2570 | |
simon@4366 | 2571 | <td>transformable elements |
vhardy@3672 | 2572 | |
vhardy@3672 | 2573 | <td>no |
vhardy@3672 | 2574 | |
dschulze@4483 | 2575 | <td>refer to the size of the element's bounding box |
vhardy@3672 | 2576 | |
vhardy@3672 | 2577 | <td>visual |
simon@4345 | 2578 | |
simon@4345 | 2579 | <tr> |
simon@4345 | 2580 | <th><a class=property href="#transform-style">transform-style</a> |
simon@4345 | 2581 | |
simon@4345 | 2582 | <td>flat | preserve-3d |
simon@4345 | 2583 | |
simon@4345 | 2584 | <td>flat |
simon@4345 | 2585 | |
simon@4345 | 2586 | <td>transformable elements |
simon@4345 | 2587 | |
simon@4345 | 2588 | <td>no |
simon@4345 | 2589 | |
simon@4345 | 2590 | <td>N/A |
simon@4345 | 2591 | |
simon@4345 | 2592 | <td>visual |
vhardy@3672 | 2593 | </table> |
vhardy@3672 | 2594 | <!--end-properties--> |
vhardy@3672 | 2595 | |
vhardy@3672 | 2596 | <h2 class=no-num id=index>Index</h2> |
vhardy@3672 | 2597 | <!--begin-index--> |
vhardy@3672 | 2598 | |
vhardy@3672 | 2599 | <ul class=indexlist> |
simon@4365 | 2600 | <li>3D rendering context, <a href="#d-rendering-context" |
simon@4365 | 2601 | title="3D rendering context"><strong>4.</strong></a> |
simon@4365 | 2602 | |
simon@4345 | 2603 | <li>backface-visibility, <a href="#backface-visibility" |
dschulze@4598 | 2604 | title=backface-visibility><strong>12.</strong></a> |
simon@4345 | 2605 | |
dschulze@4483 | 2606 | <li>bounding box, <a href="#bounding-box" |
dschulze@4483 | 2607 | title="bounding box"><strong>4.</strong></a> |
dschulze@4483 | 2608 | |
simon@4365 | 2609 | <li>perpsective matrix, <a href="#perpsective-matrix" |
simon@4365 | 2610 | title="perpsective matrix"><strong>4.</strong></a> |
simon@4365 | 2611 | |
simon@4345 | 2612 | <li>perspective, <a href="#perspective" |
dschulze@4598 | 2613 | title=perspective><strong>10.</strong></a> |
simon@4345 | 2614 | |
simon@4345 | 2615 | <li>perspective-origin, <a href="#perspective-origin" |
dschulze@4598 | 2616 | title=perspective-origin><strong>11.</strong></a> |
simon@4345 | 2617 | |
simon@4345 | 2618 | <li>transform, <a href="#effects" title=transform><strong>6.</strong></a> |
vhardy@3672 | 2619 | |
simon@4365 | 2620 | <li>transformable element, <a href="#transformable-element" |
simon@4365 | 2621 | title="transformable element"><strong>4.</strong></a> |
simon@4365 | 2622 | |
simon@4365 | 2623 | <li>transformation matrix, <a href="#transformation-matrix" |
simon@4365 | 2624 | title="transformation matrix"><strong>4.</strong></a> |
simon@4365 | 2625 | |
vhardy@3672 | 2626 | <li>transform-origin, <a href="#transform-origin" |
dschulze@4598 | 2627 | title=transform-origin><strong>8.</strong></a> |
simon@4345 | 2628 | |
simon@4345 | 2629 | <li>transform-style, <a href="#transform-style" |
dschulze@4598 | 2630 | title=transform-style><strong>9.</strong></a> |
vhardy@3672 | 2631 | </ul> |
vhardy@3672 | 2632 | <!--end-index--> |
vhardy@3672 | 2633 | </html> |
vhardy@3672 | 2634 | <!-- Keep this comment at the end of the file |
vhardy@3672 | 2635 | Local variables: |
vhardy@3672 | 2636 | mode: sgml |
vhardy@3672 | 2637 | sgml-declaration:"~/SGML/HTML4.decl" |
vhardy@3672 | 2638 | sgml-default-doctype-name:"html" |
vhardy@3672 | 2639 | sgml-minimize-attributes:t |
vhardy@3672 | 2640 | sgml-nofill-elements:("pre" "style" "br") |
vhardy@3672 | 2641 | sgml-live-element-indicator:t |
vhardy@3672 | 2642 | sgml-omittag:nil |
vhardy@3672 | 2643 | sgml-shorttag:nil |
vhardy@3672 | 2644 | sgml-namecase-general:t |
vhardy@3672 | 2645 | sgml-general-insert-case:lower |
vhardy@3672 | 2646 | sgml-always-quote-attributes:t |
vhardy@3672 | 2647 | sgml-indent-step:nil |
vhardy@3672 | 2648 | sgml-indent-data:t |
vhardy@3672 | 2649 | sgml-parent-document:nil |
vhardy@3672 | 2650 | sgml-exposed-tags:nil |
vhardy@3672 | 2651 | sgml-local-catalogs:nil |
vhardy@3672 | 2652 | sgml-local-ecat-files:nil |
vhardy@3672 | 2653 | End: |
vhardy@3672 | 2654 | --> |