css3-transforms/Overview.html

Mon, 12 Mar 2012 11:30:19 -0600

author
Aryeh Gregor <ayg@aryeh.name>
date
Mon, 12 Mar 2012 11:30:19 -0600
changeset 4736
3c173d4d4749
parent 4703
16db95fda02f
child 4737
9338e35c5058
permissions
-rw-r--r--

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 &lt;simon.fraser &#64;apple.com&gt;
vhardy@3672 68
vhardy@3672 69 <dd>Dean Jackson (<a href="http://www.apple.com/">Apple Inc</a>) &lt;dino
vhardy@3672 70 &#64;apple.com&gt;
vhardy@3672 71
vhardy@3672 72 <dd>David Hyatt (<a href="http://www.apple.com/">Apple Inc</a>) &lt;hyatt
vhardy@3672 73 &#64;apple.com&gt;
vhardy@3672 74
vhardy@3672 75 <dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>)
vhardy@3672 76 &lt;cmarrin &#64;apple.com&gt;
vhardy@3672 77
vhardy@3672 78 <dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>)
vhardy@3672 79 &lt;eoconnor &#64;apple.com&gt;
dschulze@4323 80
dschulze@4323 81 <dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>)
dschulze@4323 82 &lt;dschulze &#64;adobe.com&gt;
simon@4581 83
simon@4581 84 <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) &lt;ayg
simon@4581 85 &#64;aryeh.name&gt;
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&amp;product=CSS&amp;component=Transforms&amp;resolution=---&amp;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> &copy; 2012 <a
vhardy@3672 101 href="http://www.w3.org/"><acronym
vhardy@3672 102 title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</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 &#8220;css3-transforms&#8221; in the subject, preferably like this:
simon@4357 149 &#8220;[<!---->css3-transforms<!---->] <em>&hellip;summary of
vhardy@3672 150 comment&hellip;</em>&#8221;
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 &lsquo;<code class=css><code
dschulze@4602 193 class=property>transform</code></code>&rsquo; Property </a>
dschulze@4598 194
dschulze@4598 195 <li><a href="#svg-transform"><span class=secno>7. </span> The SVG
dschulze@4602 196 &lsquo;<code class=css><code
dschulze@4602 197 class=property>transform</code></code>&rsquo; 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 &lsquo;<code class=css><code
dschulze@4602 201 class=property>transform</code></code>&rsquo; 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 &lsquo;<code class=css><code
dschulze@4602 206 class=property>transform</code></code>&rsquo; 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>&lt;translation-value&gt;</var> and
dschulze@4602 219 <var>&lt;length&gt;</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>&lt;angle&gt;</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>&lt;number&gt;</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 &lsquo;<code
dschulze@4598 231 class=property>gradientTransform</code>&rsquo; and &lsquo;<code
dschulze@4598 232 class=property>patternTransform</code>&rsquo; 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 &lsquo;<code class=css><code
dschulze@4602 245 class=property>transform</code></code>&rsquo; 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 &lsquo;<code class=property>animate</code>&rsquo; and
dschulze@4598 252 &lsquo;<code class=property>set</code>&rsquo; 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 &lsquo;<code class=property>attributeName</code>&rsquo;
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 &lsquo;<code class=property>attributeType</code>&rsquo;
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 &lsquo;<code
dschulze@4598 264 class=property>animateTransform</code>&rsquo; 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 &lsquo;<code class=css><code
dschulze@4602 270 class=property>transform-origin</code></code>&rsquo; Property </a>
vhardy@3672 271
dschulze@4598 272 <li><a href="#transform-style-property"><span class=secno>9. </span> The
dschulze@4602 273 &lsquo;<code class=css><code
dschulze@4602 274 class=property>transform-style</code></code>&rsquo; Property </a>
simon@4365 275
dschulze@4598 276 <li><a href="#perspective-property"><span class=secno>10. </span> The
dschulze@4602 277 &lsquo;<code class=css><code
dschulze@4602 278 class=property>perspective</code></code>&rsquo; Property </a>
dschulze@4598 279
dschulze@4598 280 <li><a href="#perspective-origin-property"><span class=secno>11. </span>
dschulze@4602 281 The &lsquo;<code class=css><code
dschulze@4602 282 class=property>perspective-origin</code></code>&rsquo; Property </a>
simon@4345 283
dschulze@4598 284 <li><a href="#backface-visibility-property"><span class=secno>12. </span>
dschulze@4602 285 The &lsquo;<code class=css><code
dschulze@4602 286 class=property>backface-visibility</code></code>&rsquo; 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 &lsquo;<a
dschulze@4602 344 href="#effects"><code class=css><code
dschulze@4602 345 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#transform-origin"><code class=css><code
dschulze@4602 354 class=property>transform-origin</code></code></a>&rsquo; 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 &lsquo;<a href="#perspective"><code class=css><code
dschulze@4602 359 class=property>perspective</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 362 href="#perspective-origin"><code class=css><code
dschulze@4602 363 class=property>perspective-origin</code></code></a>&rsquo; 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 &lsquo;<a href="#transform-style"><code class=css><code
dschulze@4602 368 class=property>transform-style</code></code></a>&rsquo; 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 &lsquo;<a href="#backface-visibility"><code class=css><code
dschulze@4602 374 class=property>backface-visibility</code></code></a>&rsquo; 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 &lsquo;<code
dschulze@4602 379 class=property>hidden</code>&rsquo; for this property.
simon@4345 380 </ul>
simon@4345 381
dschulze@4602 382 <p> Note that while some values of the &lsquo;<a href="#effects"><code
dschulze@4602 383 class=css><code class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 441 class=property>transform</code></code></a>&rsquo;, &lsquo;<code
dschulze@4323 442 class=property>patternTransform</code>&rsquo; or &lsquo;<code
simon@4345 443 class=property>gradientTransform</code>&rsquo;.</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 &lsquo;<a
dschulze@4602 450 href="#perspective"><code class=css><code
dschulze@4602 451 class=property>perspective</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 452 href="#perspective-origin"><code class=css><code
dschulze@4602 453 class=property>perspective-origin</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 461 href="#effects"><code class=css><code
dschulze@4602 462 class=property>transform</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 463 href="#transform-origin"><code class=css><code
dschulze@4602 464 class=property>transform-origin</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 473 href="#transform-style"><code class=css><code
dschulze@4602 474 class=property>transform-style</code></code></a>&rsquo; property of
dschulze@4602 475 &lsquo;<code class=css><code class=css>preserve-3d</code></code>&rsquo;,
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 &lsquo;<code class=css><code
dschulze@4602 487 class=css>none</code></code>&rsquo; for the &lsquo;<a
dschulze@4602 488 href="#effects"><code class=css><code
dschulze@4602 489 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 498 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 515 class=property>transform</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 516 href="#transform-origin"><code class=css><code
dschulze@4602 517 class=property>transform-origin</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 524 href="#transform-origin"><code class=css><code
dschulze@4602 525 class=property>transform-origin</code></code></a>&rsquo;
dschulze@4602 526
dschulze@4602 527 <li>Multiply by each of the transform functions in &lsquo;<a
dschulze@4602 528 href="#effects"><code class=css><code
dschulze@4602 529 class=property>transform</code></code></a>&rsquo; property in turn
dschulze@4602 530
dschulze@4602 531 <li>Translate by the negated computed X, Y and Z values of &lsquo;<a
dschulze@4602 532 href="#transform-origin"><code class=css><code
dschulze@4602 533 class=property>transform-origin</code></code></a>&rsquo;
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&deg;
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 &lsquo;<code class=css><code class=css>50%
dschulze@4602 566 50%</code></code>&rsquo;.</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 &lt;div style="transform: translate(80px, 80px)"&gt;
dschulze@4602 576 &lt;div style="transform: scale(1.5, 1.5)"&gt;
dschulze@4602 577 &lt;div style="transform: rotate(45deg)"&gt;&lt;/div&gt;
dschulze@4602 578 &lt;/div&gt;
simon@4358 579 &lt;/div&gt;
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 &lsquo;<code class=css><code
dschulze@4602 589 class=property>overflow</code></code>&rsquo; property is &lsquo;<code
dschulze@4602 590 class=css><code class=css>scroll</code></code>&rsquo; or &lsquo;<code
dschulze@4602 591 class=css><code class=css>auto</code></code>&rsquo;, 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 &lsquo;<code
dschulze@4602 596 class=css><code class=css>none</code></code>&rsquo; 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 &lt;style&gt;
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 &lt;/style&gt;
simon@4366 647
simon@4366 648 &lt;div class="container"&gt;
simon@4366 649 &lt;div class="transformed"&gt;&lt;/div&gt;
simon@4366 650 &lt;/div&gt;
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&deg; 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 &lsquo;<a href="#perspective"><code class=css><code
dschulze@4602 661 class=property>perspective</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 662 href="#perspective-origin"><code class=css><code
dschulze@4602 663 class=property>perspective-origin</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 676 href="#perspective-origin"><code class=css><code
dschulze@4602 677 class=property>perspective-origin</code></code></a>&rsquo;
dschulze@4602 678
dschulze@4602 679 <li>Multiply by the matrix that would be obtained from the &lsquo;<code
dschulze@4602 680 class=css><a href="#perspective-function"><code
dschulze@4602 681 class=css>perspective(&lt;length&gt;)</code></a></code>&rsquo; transform
dschulze@4602 682 function, where the length is provided by the value of the &lsquo;<a
dschulze@4602 683 href="#perspective"><code class=css><code
dschulze@4602 684 class=property>perspective</code></code></a>&rsquo; property
dschulze@4602 685
dschulze@4602 686 <li>Translate by the negated computed X and Y values of &lsquo;<a
dschulze@4602 687 href="#perspective-origin"><code class=css><code
dschulze@4602 688 class=property>perspective-origin</code></code></a>&rsquo;
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 &lt;style&gt;
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 &lt;/style&gt;
simon@4366 709
simon@4366 710 &lt;div class="container"&gt;
simon@4366 711 &lt;div class="transformed"&gt;&lt;/div&gt;
simon@4366 712 &lt;/div&gt;
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 &lt;style&gt;
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 &lt;/style&gt;
simon@4366 772
simon@4366 773 &lt;div class="container"&gt;
dschulze@4602 774 &lt;div class="transformed"&gt;
dschulze@4602 775 &lt;div class="child"&gt;&lt;/div&gt;
dschulze@4602 776 &lt;/div&gt;
simon@4366 777 &lt;/div&gt;
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 &lsquo;<code class=css><code class=css>transform-style:
dschulze@4602 782 preserve-3d</code></code>&rsquo;. 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 &lsquo;<a href="#transform-style"><code class=css><code
dschulze@4602 801 class=property>transform-style</code></code></a>&rsquo; is &lsquo;<code
dschulze@4602 802 class=css><code class=css>preserve-3d</code></code>&rsquo;, 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 &lsquo;<a
dschulze@4602 808 href="#transform-style"><code class=css><code
dschulze@4602 809 class=property>transform-style</code></code></a>&rsquo; is &lsquo;<code
dschulze@4602 810 class=css><code class=css>preserve-3d</code></code>&rsquo;, 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 &lt;style&gt;
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 &lt;/style&gt;
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 &lsquo;<code class=css><code class=css>transform-style:
dschulze@4602 873 preserve-3d</code></code>&rsquo; 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 &lt;style&gt;
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 &lt;/style&gt;
simon@4364 926
simon@4364 927 &lt;div class="container"&gt;
simon@4364 928 &lt;div&gt;&lt;/div&gt;
simon@4364 929 &lt;div&gt;&lt;/div&gt;
simon@4364 930 &lt;/div&gt;
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 &lsquo;<a
dschulze@4602 948 href="#backface-visibility"><code class=css><code
dschulze@4602 949 class=property>backface-visibility</code></code></a>&rsquo; 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 &lsquo;<code class=css><code class=css>backface-visibility:
dschulze@4602 953 hidden</code></code>&rsquo; 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 &lsquo;<a
dschulze@4602 959 href="#effects"><code class=css><code
dschulze@4602 960 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 964 class=property>transform</code></code></a>&rsquo; 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 | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
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&nbsp;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 &lsquo;<code
simon@4363 1025 class=property>none</code>&rsquo;.
simon@4363 1026
dschulze@4602 1027 <p>Any value other than &lsquo;<code class=css><code
dschulze@4602 1028 class=css>none</code></code>&rsquo; 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 &lsquo;<a
dschulze@4602 1034 href="#effects"><code class=css><code
dschulze@4602 1035 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 1039 href="#effects"><code class=css><code
dschulze@4602 1040 class=property>transform</code></code></a>&rsquo;, &lsquo;<code
dschulze@4602 1041 class=property>gradientTransform</code>&rsquo; or &lsquo;<code
dschulze@4602 1042 class=property>patternTransform</code>&rsquo; 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 &lsquo;<code
dschulze@4598 1046 class=css>presentation attributes</code>&rsquo; and makes the &lsquo;<a
dschulze@4602 1047 href="#effects"><code class=css><code
dschulze@4602 1048 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#transform-origin"><code class=css><code
dschulze@4602 1054 class=property>transform-origin</code></code></a>&rsquo;, &lsquo;<a
dschulze@4602 1055 href="#perspective"><code class=css><code
dschulze@4602 1056 class=property>perspective</code></code></a>&rsquo;, &lsquo;<a
dschulze@4602 1057 href="#perspective-origin"><code class=css><code
dschulze@4602 1058 class=property>perspective-origin</code></code></a>&rsquo;, &lsquo;<a
dschulze@4602 1059 href="#transform-style"><code class=css><code
dschulze@4602 1060 class=property>transform-style</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 1061 href="#backface-visibility"><code class=css><code
dschulze@4602 1062 class=property>backface-visibility</code></code></a>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1067 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 1077 href="#effects"><code class=css><code
dschulze@4602 1078 class=property>transform</code></code></a>&rsquo; style property and the
dschulze@4602 1079 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1080 class=property>transform</code></code></a>&rsquo; presentation attribute.
dschulze@4602 1081 </p>
dschulze@4598 1082
dschulze@4598 1083 <pre>&lt;svg&gt;
dschulze@4598 1084 &lt;style&gt;
dschulze@4598 1085 .container {
dschulze@4598 1086 transform: translate(100px, 100px);
dschulze@4598 1087 }
dschulze@4598 1088 &lt;/style&gt;
dschulze@4598 1089
dschulze@4598 1090 &lt;g class="container" transform="translate (200 200)"&gt;
dschulze@4598 1091 &lt;rect width="100" height="100" fill="blue" /&gt;
dschulze@4598 1092 &lt;/g&gt;
dschulze@4598 1093 &lt;/svg&gt;</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 &lsquo;<a
dschulze@4602 1099 href="#effects"><code class=css><code
dschulze@4602 1100 class=property>transform</code></code></a>&rsquo; style property
dschulze@4602 1101 overrides the &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1102 class=property>transform</code></code></a>&rsquo; presentation attribute.
dschulze@4602 1103 Therefore the container gets translated by &lsquo;<code class=css><code
dschulze@4602 1104 class=css>100px</code></code>&rsquo; in horizontal and vertical
dschulze@4602 1105 direction, instead of &lsquo;<code class=css><code
dschulze@4602 1106 class=css>200px</code></code>&rsquo;.</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 &lsquo;<a
dschulze@4602 1110 href="#effects"><code class=css><code
dschulze@4602 1111 class=property>transform</code></code></a>&rsquo; attribute</h3>
dschulze@4598 1112
dschulze@4598 1113 <p> To provide backward compatibility, the syntax of the &lsquo;<a
dschulze@4602 1114 href="#effects"><code class=css><code
dschulze@4602 1115 class=property>transform</code></code></a>&rsquo; presentation attribute
dschulze@4602 1116 differs from the syntax of the &lsquo;<a href="#effects"><code
dschulze@4602 1117 class=css><code class=property>transform</code></code></a>&rsquo; style
dschulze@4598 1118 property like shown in the example above. However, the syntax used for the
dschulze@4602 1119 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1120 class=property>transform</code></code></a>&rsquo; style property can be
dschulze@4602 1121 used for a &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1122 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<code
dschulze@4602 1126 class=css><code class=css>transform="translate(200px,
dschulze@4602 1127 200px)"</code></code>&rsquo; instead of &lsquo;<code class=css><code
dschulze@4602 1128 class=css>transform="translate (200 200)"</code></code>&rsquo; because the
dschulze@4602 1129 second example with the spaces before the &lsquo;<code class=css><code
dschulze@4602 1130 class=css>(</code></code>&rsquo;, 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1137 class=property>transform</code></code></a>&rsquo; 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>&lt;translation-value&gt;</var> and <var>&lt;length&gt;</var> type</h5>
dschulze@4602 1165
dschulze@4602 1166 <p> A translation-value or length can be a <var>&lt;number&gt;</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>&lt;angle&gt;</var> type</h5>
dschulze@4602 1176
dschulze@4602 1177 <p> An angle can be a <var>&lt;number&gt;</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>&lt;number&gt;</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 &lsquo;<code class=property>gradientTransform</code>&rsquo;
dschulze@4598 1191 and &lsquo;<code class=property>patternTransform</code>&rsquo; attributes</h3>
dschulze@4598 1192
dschulze@4598 1193 <p> SVG specifies the attributes &lsquo;<code
dschulze@4598 1194 class=property>gradientTransform</code>&rsquo; and &lsquo;<code
dschulze@4598 1195 class=property>patternTransform</code>&rsquo;. 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 &lsquo;<a
dschulze@4602 1198 href="#effects"><code class=css><code
dschulze@4602 1199 class=property>transform</code></code></a>&rsquo; attribute. This
dschulze@4602 1200 specification won't introduce corresponding CSS style properties. Instead
dschulze@4602 1201 the style can be set by the &lsquo;<a href="#effects"><code
dschulze@4602 1202 class=css><code class=property>transform</code></code></a>&rsquo; 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 &lsquo;<code class=css><code class=property>transform</code></code>&rsquo;
dschulze@4602 1212 attribute</a> in SVG 1.1. Therefore the two-dimensional transform function
dschulze@4602 1213 &lsquo;<code class=css><code
dschulze@4602 1214 class=css>rotate(&lt;angle&gt;)</code></code>&rsquo; gets extended as
dschulze@4602 1215 follows:
dschulze@4598 1216
dschulze@4598 1217 <dl>
dschulze@4598 1218 <dt> <code class=css>rotate(&lt;angle&gt;[, &lt;translation-value&gt;,
dschulze@4598 1219 &lt;translation-value&gt;])</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 &lsquo;<a href="#transform-origin"><code class=css><code
dschulze@4602 1224 class=property>transform-origin</code></code></a>&rsquo; 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 &lsquo;<code
dschulze@4602 1228 class=css><code class=css>rotate(90deg, 100px,
dschulze@4602 1229 100px)</code></code>&rsquo; 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>: &lsquo;<code class=property>a</code>&rsquo;,
dschulze@4602 1244 &lsquo;<code class=property>g</code>&rsquo;, &lsquo;<code
dschulze@4601 1245 class=property>svg</code>&rsquo;, 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">&lsquo;<code
dschulze@4601 1251 class=property>foreignObject</code>&rsquo;</a> element.
dschulze@4601 1252
dschulze@4602 1253 <p> Three-dimensional transform functions and the properties &lsquo;<a
dschulze@4602 1254 href="#perspective"><code class=css><code
dschulze@4602 1255 class=property>perspective</code></code></a>&rsquo;, &lsquo;<a
dschulze@4602 1256 href="#perspective-origin"><code class=css><code
dschulze@4602 1257 class=property>perspective-origin</code></code></a>&rsquo;, &lsquo;<a
dschulze@4602 1258 href="#transform-style"><code class=css><code
dschulze@4602 1259 class=property>transform-style</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 1260 href="#backface-visibility"><code class=css><code
dschulze@4602 1261 class=property>backface-visibility</code></code></a>&rsquo; can not be
dschulze@4602 1262 used for the elements: &lsquo;<code class=property>clipPath</code>&rsquo;,
dschulze@4602 1263 &lsquo;<code class=property>mask</code>&rsquo;, &lsquo;<code
dschulze@4601 1264 class=property>linearGradient</code>&rsquo;, &lsquo;<code
dschulze@4601 1265 class=property>radialGradient</code>&rsquo; and &lsquo;<code
dschulze@4601 1266 class=property>pattern</code>&rsquo;. 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 &lsquo;<code
dschulze@4601 1272 class=property>clipPath</code>&rsquo;, &lsquo;<code
dschulze@4601 1273 class=property>mask</code>&rsquo; or &lsquo;<code
dschulze@4601 1274 class=property>pattern</code>&rsquo; 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 &lsquo;<code class=property>pattern</code>&rsquo;, &lsquo;<code
dschulze@4598 1291 class=property>mask</code>&rsquo; or &lsquo;<code
dschulze@4598 1292 class=property>clipPath</code>&rsquo; 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 &lsquo;<a href="#transform-origin"><code class=css><code
dschulze@4602 1299 class=property>transform-origin</code></code></a>&rsquo; property on the
dschulze@4602 1300 pattern in the following example specifies a &lsquo;<code class=css><code
dschulze@4602 1301 class=css>50%</code></code>&rsquo; translation of the origin in the
dschulze@4598 1302 horizontal and vertical dimension. The &lsquo;<a href="#effects"><code
dschulze@4602 1303 class=css><code class=property>transform</code></code></a>&rsquo;
dschulze@4602 1304 property specifies a translation as well, but in absolute lengths.</p>
dschulze@4598 1305
dschulze@4598 1306 <pre>&lt;svg&gt;
dschulze@4598 1307 &lt;style&gt;
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 &lt;/style&gt;
dschulze@4598 1313
dschulze@4598 1314 &lt;defs&gt;
dschulze@4598 1315 &lt;pattern id="pattern-1"&gt;
dschulze@4598 1316 &lt;rect id="rect1" width="100" height="100" fill="blue" /&gt;
dschulze@4598 1317 &lt;/pattern&gt;
dschulze@4598 1318 &lt;/defs&gt;
dschulze@4598 1319
dschulze@4598 1320 &lt;rect width="100" height="100" fill="url(#pattern-1)" /&gt;
dschulze@4598 1321 &lt;/svg&gt;</pre>
dschulze@4598 1322
dschulze@4598 1323 <p> A SVG &lsquo;<code class=property>pattern</code>&rsquo; element
dschulze@4598 1324 doesn't have an object bounding box. Therefore the relative values of the
dschulze@4602 1325 &lsquo;<a href="#transform-origin"><code class=css><code
dschulze@4602 1326 class=property>transform-origin</code></code></a>&rsquo; property don't
dschulze@4602 1327 affect the rendering and are treated as if zero was specified. The
dschulze@4602 1328 translation on the &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1329 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1336 class=property>transform</code></code></a>&rsquo; attribute</h3>
dschulze@4602 1337
dschulze@4602 1338 <p> The SVG specification defines the &lsquo;<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>&rsquo; 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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1346 class=property>transform</code></code></a>&rsquo; 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. &lsquo;<code class=css><code
dschulze@4602 1351 class=property>baseVal</code></code>&rsquo; gives the author the
dschulze@4602 1352 possibility to access and modify the values of the SVG &lsquo;<a
dschulze@4602 1353 href="#effects"><code class=css><code
dschulze@4602 1354 class=property>transform</code></code></a>&rsquo; attribute. To provide
dschulze@4602 1355 the necessary backward compatibility to SVG DOM, &lsquo;<code
dschulze@4602 1356 class=css><code class=property>baseVal</code></code>&rsquo; must reflect
dschulze@4602 1357 the values of this author style sheet. All modifications to SVG DOM
dschulze@4602 1358 objects of &lsquo;<code class=css><code
dschulze@4602 1359 class=property>baseVal</code></code>&rsquo; must affect this author style
dschulze@4602 1360 sheet immediately.
dschulze@4602 1361
dschulze@4602 1362 <p> &lsquo;<code class=css><code
dschulze@4602 1363 class=property>animVal</code></code>&rsquo; represents the computed style
dschulze@4602 1364 of the &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1365 class=property>transform</code></code></a>&rsquo; 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 &lsquo;<code
dschulze@4602 1370 class=css><code class=property>animVal</code></code>&rsquo; can not be
dschulze@4601 1371 modified.
dschulze@4601 1372
dschulze@4602 1373 <p> The attribute &lsquo;<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>&rsquo; of <a
dschulze@4602 1376 href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">&lsquo;<code
dschulze@4602 1377 class=property>SVGTransform</code>&rsquo;</a> must return &lsquo;<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>&rsquo; 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 &lsquo;<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>&rsquo; by the attribute
dschulze@4602 1386 &lsquo;<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>&rsquo;.
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 &lsquo;<code class=property>animate</code>&rsquo; and &lsquo;<code
dschulze@4598 1394 class=property>set</code>&rsquo; element</h4>
dschulze@4598 1395
dschulze@4598 1396 <p> The SVG 1.1 specification did not define animations of the &lsquo;<a
dschulze@4602 1397 href="#effects"><code class=css><code
dschulze@4602 1398 class=property>transform</code></code></a>&rsquo; attribute for the SVG <a
dschulze@4601 1399 href="http://www.w3.org/TR/SVG/animate.html#AnimateElement">&lsquo;<code
dschulze@4601 1400 class=property>animate</code>&rsquo;</a> element or the SVG <a
dschulze@4601 1401 href="http://www.w3.org/TR/SVG/animate.html#SetElement">&lsquo;<code
dschulze@4601 1402 class=property>set</code>&rsquo;</a> element. This specification
dschulze@4601 1403 explicitly allows the animation of the presentation attributes &lsquo;<a
dschulze@4602 1404 href="#effects"><code class=css><code
dschulze@4602 1405 class=property>transform</code></code></a>&rsquo;, &lsquo;<code
dschulze@4602 1406 class=property>gradientTransform</code>&rsquo; and &lsquo;<code
dschulze@4602 1407 class=property>patternTransform</code>&rsquo; for the &lsquo;<code
dschulze@4602 1408 class=property>animate</code>&rsquo; and &lsquo;<code
dschulze@4598 1409 class=property>set</code>&rsquo; 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 &lsquo;<code class=property>attributeName</code>&rsquo; 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">&lsquo;<code
dschulze@4598 1419 class=property>attributeName</code>&rsquo;</a> attribute to specify the
dschulze@4598 1420 name of the target attribute. For the presentation attributes &lsquo;<code
dschulze@4598 1421 class=property>gradientTransform</code>&rsquo; and &lsquo;<code
dschulze@4598 1422 class=property>patternTransform</code>&rsquo; it will also be possible to
dschulze@4602 1423 use the value &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1424 class=property>transform</code></code></a>&rsquo;. 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>&lt;linearGradient gradientTransform="scale(2)"&gt;
dschulze@4598 1432 &lt;animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
dschulze@4598 1433 dur="3s" additive="sum"/&gt;
dschulze@4598 1434 &lt;animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
dschulze@4598 1435 dur="3s" additive="sum"/&gt;
dschulze@4598 1436 &lt;/linearGradient&gt;</pre>
dschulze@4598 1437
dschulze@4598 1438 <p>The &lsquo;<code class=property>linearGradient</code>&rsquo; element
dschulze@4598 1439 specifies the &lsquo;<code class=property>gradientTransform</code>&rsquo;
dschulze@4598 1440 presentation attribute. The two &lsquo;<code
dschulze@4598 1441 class=property>animate</code>&rsquo; elements address the target
dschulze@4598 1442 attribute &lsquo;<code class=property>gradientTransform</code>&rsquo; and
dschulze@4602 1443 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1444 class=property>transform</code></code></a>&rsquo;. Even so all animations
dschulze@4602 1445 apply to the same gradient transformation by taking the value of the
dschulze@4598 1446 &lsquo;<code class=property>gradientTransform</code>&rsquo; 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 &lsquo;<code class=property>attributeType</code>&rsquo; 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">&lsquo;<code
dschulze@4598 1457 class=property>attributeType</code>&rsquo;</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 &lsquo;<code class=css><code
dschulze@4602 1460 class=css>CSS</code></code>&rsquo;, &lsquo;<code class=css><code
dschulze@4602 1461 class=css>XML</code></code>&rsquo; or &lsquo;<code class=css><code
dschulze@4602 1462 class=css>auto</code></code>&rsquo;, where &lsquo;<code class=css><code
dschulze@4602 1463 class=css>auto</code></code>&rsquo; is the default value.
dschulze@4598 1464
dschulze@4598 1465 <p> However, in the combination with the &lsquo;<a href="#effects"><code
dschulze@4602 1466 class=css><code class=property>transform</code></code></a>&rsquo;,
dschulze@4602 1467 &lsquo;<code class=property>patternTransform</code>&rsquo; and
dschulze@4602 1468 &lsquo;<code class=property>gradientTransform</code>&rsquo; presentation
dschulze@4602 1469 attributes, &lsquo;<code class=property>attributeType</code>&rsquo; can
dschulze@4602 1470 just be used to indicate the syntax rules used for the transform attribute
dschulze@4602 1471 values. A value of &lsquo;<code class=css><code
dschulze@4602 1472 class=css>CSS</code></code>&rsquo; indicates that the transform values
dschulze@4602 1473 should be parsed according to the CSS syntax. A value of &lsquo;<code
dschulze@4602 1474 class=css><code class=css>XML</code></code>&rsquo; indicates that the
dschulze@4602 1475 transform values should be parsed according to the SVG &lsquo;<a
dschulze@4602 1476 href="#effects"><code class=css><code
dschulze@4602 1477 class=property>transform</code></code></a>&rsquo; <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 &lsquo;<a
dschulze@4602 1481 href="#effects"><code class=css><code
dschulze@4602 1482 class=property>transform</code></code></a>&rsquo; <a
dschulze@4602 1483 href="#svg-syntax">syntax</a> for a value of &lsquo;<code class=css><code
dschulze@4602 1484 class=css>auto</code></code>&rsquo; 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 &lsquo;<code class=property>animateTransform</code>&rsquo; 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 &lsquo;<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>&rsquo; 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 &lsquo;<a
dschulze@4602 1501 href="#transform-origin"><code class=css><code
dschulze@4602 1502 class=property>transform-origin</code></code></a>&rsquo; 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> [ &lt;percentage> | &lt;length> | left | center | right | top |
ayg@4703 1515 bottom]<br>
ayg@4703 1516 |<br>
ayg@4703 1517 [<br>
ayg@4703 1518 &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | left | center | right
ayg@4703 1519 ]<br>
ayg@4703 1520 &nbsp;&nbsp;&amp;&amp;<br>
ayg@4703 1521 &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | top | center | bottom
ayg@4703 1522 ]<br>
ayg@4703 1523 ] &lt;length&gt;?<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&nbsp;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 &lt;length&gt; the absolute value, otherwise a percentage
simon@4366 1555 </table>
simon@4366 1556
dschulze@4602 1557 <p> The values of the &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1558 class=property>transform</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 1559 href="#transform-origin"><code class=css><code
dschulze@4602 1560 class=property>transform-origin</code></code></a>&rsquo; 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 &lsquo;<code class=property>center</code>&rsquo;. If one or two values are
ayg@4703 1566 specified, the third value is assumed to be &lsquo;<code
ayg@4703 1567 class=css>0px</code>&rsquo;.
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>&lt;percentage&gt;</var> and <var>&lt;length&gt;</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>&lt;length&gt;</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 &lsquo;<a
dschulze@4602 1584 href="#transform-style"><code class=css><code
dschulze@4602 1585 class=property>transform-style</code></code></a>&rsquo; 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&nbsp;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 &lsquo;<code class=css><code
dschulze@4602 1631 class=css>preserve-3d</code></code>&rsquo; for &lsquo;<a
dschulze@4602 1632 href="#transform-style"><code class=css><code
dschulze@4602 1633 class=property>transform-style</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 1639 href="#transform-style"><code class=css><code
dschulze@4602 1640 class=property>transform-style</code></code></a>&rsquo;: &lsquo;<code
dschulze@4602 1641 class=css><code class=css>preserve-3d</code></code>&rsquo;:
simon@4345 1642
simon@4345 1643 <ul>
dschulze@4602 1644 <li>&lsquo;<code class=css><code
dschulze@4602 1645 class=property>overflow</code></code>&rsquo;: any value other than
dschulze@4602 1646 &lsquo;<code class=css><code class=property>visible</code></code>&rsquo;.
dschulze@4602 1647
dschulze@4602 1648 <li>&lsquo;<code class=css><code
dschulze@4602 1649 class=property>opacity</code></code>&rsquo;: any value other than 1.
dschulze@4602 1650
dschulze@4602 1651 <li>&lsquo;<code class=css><code
dschulze@4602 1652 class=property>filter</code></code>&rsquo;: any value other than
dschulze@4602 1653 &lsquo;<code class=css><code class=property>none</code></code>&rsquo;.</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 &lsquo;<a href="#effects"><code class=css><code
dschulze@4602 1662 class=property>transform</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 1663 href="#transform-origin"><code class=css><code
dschulze@4602 1664 class=property>transform-origin</code></code></a>&rsquo; 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 &lsquo;<a
dschulze@4602 1670 href="#perspective"><code class=css><code
dschulze@4602 1671 class=property>perspective</code></code></a>&rsquo; 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 | &lt;length&gt;
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&nbsp;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 &lsquo;<code class=css><code
dschulze@4602 1717 class=css>none</code></code>&rsquo;, 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 &lsquo;<code
dschulze@4602 1721 class=css><code class=css>none</code></code>&rsquo; establishes a stacking
dschulze@4602 1722 context. It also establishes a containing block (somewhat similar to
dschulze@4602 1723 &lsquo;<code class=css><code class=css>position:
dschulze@4602 1724 relative</code></code>&rsquo;), just like the &lsquo;<a
dschulze@4602 1725 href="#effects"><code class=css><code
dschulze@4602 1726 class=property>transform</code></code></a>&rsquo; property does.
dschulze@4602 1727
dschulze@4602 1728 <p> The values of the &lsquo;<a href="#perspective"><code class=css><code
dschulze@4602 1729 class=property>perspective</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 1730 href="#perspective-origin"><code class=css><code
dschulze@4602 1731 class=property>perspective-origin</code></code></a>&rsquo; 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 &lsquo;<a href="#perspective-origin"><code class=css><code
dschulze@4602 1738 class=property>perspective-origin</code></code></a>&rsquo; Property</h2>
dschulze@4602 1739
dschulze@4602 1740 <p> The &lsquo;<a href="#perspective-origin"><code class=css><code
dschulze@4602 1741 class=property>perspective-origin</code></code></a>&rsquo; 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> [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [
simon@4345 1758 &lt;percentage&gt; | &lt;length&gt; | 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&nbsp;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 &lsquo;<a href="#perspective"><code class=css><code
dschulze@4602 1793 class=property>perspective</code></code></a>&rsquo; and &lsquo;<a
dschulze@4602 1794 href="#perspective-origin"><code class=css><code
dschulze@4602 1795 class=property>perspective-origin</code></code></a>&rsquo; 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 &lsquo;<a href="#backface-visibility"><code class=css><code
dschulze@4602 1802 class=property>backface-visibility</code></code></a>&rsquo; Property</h2>
dschulze@4602 1803
dschulze@4602 1804 <p> The &lsquo;<a href="#backface-visibility"><code class=css><code
dschulze@4602 1805 class=property>backface-visibility</code></code></a>&rsquo; 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&nbsp;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 &lsquo;<code class=css><code
dschulze@4602 1864 class=css>backface-visibility: hidden</code></code>&rsquo; 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>&lt;transform-functions&gt;</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>&lt;translation-value&gt;</var> is defined as a
dschulze@4602 1891 <var>&lt;length&gt;</var> or <var>&lt;percentage&gt;</var> value, and the
dschulze@4602 1892 <var>&lt;angle&gt;</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>&lt;angle&gt;</var> is used in this specification, a
dschulze@4602 1895 <var>&lt;number&gt;</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(&lt;number&gt;, &lt;number&gt;,
simon@4365 1903 &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</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(&lt;translation-value&gt;[,
simon@4365 1909 &lt;translation-value&gt;])</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>&lt;ty&gt;</em> is not provided, ty has zero as a value.
vhardy@3672 1915
simon@4365 1916 <dt> <code class=css>translateX(&lt;translation-value&gt;)</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(&lt;translation-value&gt;)</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(&lt;number&gt;[, &lt;number&gt;])</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(&lt;number&gt;)</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(&lt;number&gt;)</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(&lt;angle&gt;)</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 &lsquo;<a href="#transform-origin"><code class=css><code
dschulze@4602 1950 class=property>transform-origin</code></code></a>&rsquo; property. For
dschulze@4602 1951 example, &lsquo;<code class=css><code
dschulze@4602 1952 class=css>rotate(90deg)</code></code>&rsquo; 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(&lt;angle&gt;[, &lt;angle&gt;])</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(&lt;angle&gt;)</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(&lt;angle&gt;)</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(&lt;number&gt;, &lt;number&gt;,
simon@4358 1976 &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
simon@4358 1977 &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
simon@4358 1978 &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
simon@4365 1979 &lt;number&gt;, &lt;number&gt;)</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(&lt;translation-value&gt;,
dschulze@4483 1985 &lt;translation-value&gt;, &lt;length&gt;)</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(&lt;length&gt;)</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(&lt;number&gt;, &lt;number&gt;,
simon@4365 1997 &lt;number&gt;)</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(&lt;number&gt;)</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(&lt;number&gt;, &lt;number&gt;,
simon@4365 2008 &lt;number&gt;, &lt;angle&gt;)</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(&lt;angle&gt;)</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(&lt;angle&gt;)</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(&lt;angle&gt;)</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(&lt;angle&gt;)</code>.
simon@4365 2035
simon@4577 2036 <dt id=perspective-function> <code
simon@4577 2037 class=css>perspective(&lt;length&gt;)</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 &lt;translation-value&gt; values are defined as [&lt;percentage&gt;
vhardy@3672 2056 | &lt;length&gt;]. 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 &lt;div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/&gt;
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 &lt;div style="transform:translate(-10px,-20px)"&gt;
simon@4358 2070 &lt;div style="transform:scale(2)"&gt;
simon@4358 2071 &lt;div style="transform:rotate(45deg)"&gt;
simon@4358 2072 &lt;div style="transform:translate(5px,10px)"&gt;
simon@4358 2073 &lt;/div&gt;
simon@4358 2074 &lt;/div&gt;
simon@4358 2075 &lt;/div&gt;
simon@4358 2076 &lt;/div&gt;
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 &lsquo;<code
vhardy@3672 2090 class=property>from</code>&rsquo; transform is the transform at the start
vhardy@3672 2091 of the transition or current keyframe. The &lsquo;<code
vhardy@3672 2092 class=property>end</code>&rsquo; 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 &lsquo;<code class=property>from</code>&rsquo; and
vhardy@3672 2097 &lsquo;<code class=property>to</code>&rsquo; 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 &lsquo;<code class=property>from</code>&rsquo; and
vhardy@3672 2119 &lsquo;<code class=property>to</code>&rsquo; 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 &lsquo;<code class=property>from</code>&rsquo; or
vhardy@3672 2125 &lsquo;<code class=property>to</code>&rsquo; transforms is "none":
vhardy@3672 2126 <ul>
vhardy@3672 2127 <li> The &lsquo;<code class=property>none</code>&rsquo; 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 &lsquo;<code class=property>from</code>&rsquo;
vhardy@3672 2131 transform is "scale(2)" and the &lsquo;<code
vhardy@3672 2132 class=property>to</code>&rsquo; transform is "none" then the value
vhardy@3672 2133 "scale(1)" will be used as the &lsquo;<code
vhardy@3672 2134 class=property>to</code>&rsquo; value, and animation will proceed
vhardy@3672 2135 using the rule above. Similarly, if the &lsquo;<code
vhardy@3672 2136 class=property>from</code>&rsquo; transform is "none" and the
vhardy@3672 2137 &lsquo;<code class=property>to</code>&rsquo; transform is "scale(2)
vhardy@3672 2138 rotate(50deg)" then the animation will execute as if the &lsquo;<code
vhardy@3672 2139 class=property>from</code>&rsquo; 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 &lsquo;<code class=property>from</code>&rsquo; and
vhardy@3672 2150 &lsquo;<code class=property>to</code>&rsquo; 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 &lsquo;<a
dschulze@4602 2337 href="#effects"><code class=property>transform</code></a>&rsquo; 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&#246;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&nbsp;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 | &lt;length&gt;
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>[ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [
simon@4345 2532 &lt;percentage&gt; | &lt;length&gt; | 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 | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
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>[ &lt;percentage> | &lt;length> | left | center | right | top |
ayg@4703 2564 bottom] | [ &nbsp;&nbsp;[ &lt;percentage> | &lt;length&gt; | left |
ayg@4703 2565 center | right ] &nbsp;&nbsp;&amp;&amp; &nbsp;&nbsp;[ &lt;percentage> |
ayg@4703 2566 &lt;length&gt; | top | center | bottom ] ] &lt;length&gt;?
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 -->

mercurial