drafts: css3-transforms/Overview.html@55d46b236cf3

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

     2 "http://www.w3.org/TR/html4/strict.dtd">

     4 <html lang=en>

     5  <head

     6   profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">

     7   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>

     8   <title>CSS Transforms</title>

    10   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>

    11   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    12    rel=dcterms.rights>

    13   <meta content="CSS Transforms" name=dcterms.title>

    14   <meta content=text name=dcterms.type>

    15   <meta content=2013-02-05 name=dcterms.issued>

    16   <meta content="http://dev.w3.org/csswg/css3-transforms/"

    17    name=dcterms.creator>

    18   <meta content=W3C name=dcterms.publisher>

    19   <meta content="http://www.w3.org/TR/2013/ED-css3-transforms-20130205/"

    20    name=dcterms.identifier>

    21   <link href="../default.css" rel=stylesheet type="text/css">

    22   <script defer=defer

    23    src="http://test.csswg.org/harness/annotate.js#CSS3-TRANSFORMS_DEV"

    24    type="text/javascript"></script>

    25   <style type="text/css">

    26       .term {

    27         font-style: italic;

    28       }

    29   </style>

    30   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet

    31    type="text/css">

    33  <body>

    34   <div class=head id=div-head> <!--begin-logo-->

    35    <p><a href="http://www.w3.org/"><img alt=W3C height=48

    36     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    38    <h1>CSS Transforms</h1>

    40    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 February

    41     2013</h2>

    43    <dl>

    44     <dt>This version:

    46     <dd> <a

    47      href="http://www.w3.org/TR/2013/ED-css3-transforms-20130205/">http://dev.w3.org/csswg/css3-transforms/</a>

    48      <!--http://www.w3.org/TR/2013/WD-css3-transforms-20130205/-->

    50     <dt>Latest version:

    52     <dd><a

    53      href="http://www.w3.org/TR/css3-transforms/">http://www.w3.org/TR/css3-transforms/</a>

    55     <dt>Editor's draft:

    57     <dd><a

    58      href="http://dev.w3.org/csswg/css3-transforms/">http://dev.w3.org/csswg/css3-transforms/</a>

    60     <dt>Previous version:

    62     <dd><a

    63      href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>

    65     <dt id=editors-list>Editors:

    67     <dd>Simon Fraser (<a href="http://www.apple.com/">Apple Inc</a>)

    68      &lt;simon.fraser @apple.com&gt;

    70     <dd>Dean Jackson (<a href="http://www.apple.com/">Apple Inc</a>) &lt;dino

    71      @apple.com&gt;

    73     <dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>)

    74      &lt;eoconnor @apple.com&gt;

    76     <dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>)

    77      &lt;dschulze @adobe.com&gt;

    79     <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) &lt;ayg

    80      @aryeh.name&gt;

    82     <dt id=former-editors-list>Former Editors:

    84     <dd>David Hyatt (<a href="http://www.apple.com/">Apple Inc</a>) &lt;hyatt

    85      @apple.com&gt;

    87     <dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>)

    88      &lt;cmarrin @apple.com&gt;

    90     <dt>Issues list:

    92     <dd><a

    93      href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transforms&amp;resolution=---&amp;cmdtype=doit">in

    94      Bugzilla</a>

    96     <dt>Test suite:

    98     <dd>none yet

    99    </dl>

   100    <!--begin-copyright-->

   101    <p class=copyright><a

   102     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

   103     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr

   104     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a

   105     href="http://www.csail.mit.edu/"><abbr

   106     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a

   107     href="http://www.ercim.eu/"><abbr

   108     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,

   109     <a href="http://www.keio.ac.jp/">Keio</a>, <a

   110     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a

   111     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

   112     <a

   113     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

   114     and <a

   115     href="http://www.w3.org/Consortium/Legal/copyright-documents">document

   116     use</a> rules apply.</p>

   117    <!--end-copyright-->

   118    <hr title="Separator for header">

   119   </div>

   121   <h2 class="no-num no-toc" id=abstract>Abstract</h2>

   123   <p>CSS transforms allows elements styled with CSS to be transformed in

   124    two-dimensional or three-dimensional space. This specification is the

   125    convergence of the <a href="http://www.w3.org/TR/css3-2d-transforms/">CSS

   126    2D transforms</a>, <a href="http://www.w3.org/TR/css3-3d-transforms/">CSS

   127    3D transforms</a> and <a

   128    href="http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/">SVG

   129    transforms</a> specifications.

   131   <h2 class="no-num no-toc" id=status>Status of this document</h2>

   132   <!--begin-status-->

   134   <p>This is a public copy of the editors' draft. It is provided for

   135    discussion only and may change at any moment. Its publication here does

   136    not imply endorsement of its contents by W3C. Don't cite this document

   137    other than as work in progress.

   139   <p>The (<a

   140    href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>) public

   141    mailing list <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (see

   142    <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred

   143    for discussion of this specification. When sending e-mail, please put the

   144    text “css3-transforms” in the subject, preferably like this:

   145    “[<!---->css3-transforms<!---->] <em>…summary of comment…</em>”

   147   <p>This document was produced by the <a

   148    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of

   149    the <a href="http://www.w3.org/Style/">Style Activity</a>) and the <a

   150    href="http://www.w3.org/Graphics/SVG/">SVG Working Group</a> (part of the

   151    <a href="http://www.w3.org/Graphics/">Graphics Activity</a>).

   153   <p>This document was produced by groups operating under the <a

   154    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February

   155    2004 W3C Patent Policy</a>. W3C maintains a <a

   156    href="http://www.w3.org/2004/01/pp-impl/32061/status"

   157    rel=disclosure>public list of any patent disclosures (CSS)</a> and a <a

   158    href="http://www.w3.org/2004/01/pp-impl/19480/status"

   159    rel=disclosure>public list of any patent disclosures (SVG)</a> made in

   160    connection with the deliverables of each group; these pages also include

   161    instructions for disclosing a patent. An individual who has actual

   162    knowledge of a patent which the individual believes contains <a

   163    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential

   164    Claim(s)</a> must disclose the information in accordance with <a

   165    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section

   166    6 of the W3C Patent Policy</a>.</p>

   167   <!--end-status-->

   169   <p> This specification replaces the former <a

   170    href="http://www.w3.org/TR/css3-2d-transforms/"

   171    title="CSS 2D Transforms">CSS 2D Transforms</a> and <a

   172    href="http://www.w3.org/TR/css3-3d-transforms/"

   173    title="CSS 3D Transforms Module Level 3">CSS 3D Transforms</a>

   174    specifications, as well as <a href="http://www.w3.org/TR/SVG-Transforms/"

   175    title="SVG Transforms 1.0">SVG Transforms</a>.

   177   <p> The <a href=ChangeLog>list of changes made to this specification</a> is

   178    available.

   180   <h2 class="no-num no-toc" id=contents>Table of contents</h2>

   181   <!--begin-toc-->

   183   <ul class=toc>

   184    <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>

   186    <li><a href="#module-interactions"><span class=secno>2. </span>Module

   187     Interactions</a>

   189    <li><a href="#css-values"><span class=secno>3. </span>CSS Values</a>

   191    <li><a href="#definitions"><span class=secno>4. </span>Definitions</a>

   193    <li><a href="#two-dimensional-subset"><span class=secno>5. </span> Two

   194     Dimensional Subset </a>

   196    <li><a href="#transform-rendering"><span class=secno>6. </span>The

   197     Transform Rendering Model</a>

   198     <ul class=toc>

   199      <li><a href="#transform-3d-rendering"><span class=secno>6.1. </span>3D

   200       Transform Rendering</a>

   202      <li><a href="#processing-of-perspective-transformed-boxes"><span

   203       class=secno>6.2. </span> Processing of Perspective-Transformed Boxes

   204       </a>

   205     </ul>

   207    <li><a href="#transform-property"><span class=secno>7. </span> The

   208     ‘<code class=property>transform</code>’ Property </a>

   210    <li><a href="#transform-origin-property"><span class=secno>8. </span> The

   211     ‘<code class=property>transform-origin</code>’ Property </a>

   213    <li><a href="#transform-style-property"><span class=secno>9. </span> The

   214     ‘<code class=property>transform-style</code>’ Property </a>

   216    <li><a href="#perspective-property"><span class=secno>10. </span> The

   217     ‘<code class=property>perspective</code>’ Property </a>

   219    <li><a href="#perspective-origin-property"><span class=secno>11. </span>

   220     The ‘<code class=property>perspective-origin</code>’ Property </a>

   222    <li><a href="#backface-visibility-property"><span class=secno>12. </span>

   223     The ‘<code class=property>backface-visibility</code>’ Property </a>

   225    <li><a href="#svg-transform"><span class=secno>13. </span> The SVG

   226     ‘<code class=property>transform</code>’ Attribute </a>

   227     <ul class=toc>

   228      <li><a href="#transform-attribute-specificity"><span class=secno>13.1.

   229       </span> SVG ‘<code class=property>transform</code>’ attribute

   230       specificity </a>

   232      <li><a href="#svg-syntax"><span class=secno>13.2. </span> Syntax of the

   233       SVG ‘<code class=property>transform</code>’ attribute </a>

   234       <ul class=toc>

   235        <li><a href="#svg-transform-list"><span class=secno>13.2.1. </span>

   236         Transform List </a>

   238        <li><a href="#svg-functional-notation"><span class=secno>13.2.2.

   239         </span> Functional Notation </a>

   241        <li><a href="#svg-data-types"><span class=secno>13.2.3. </span> SVG

   242         Data Types </a>

   243         <ul class=toc>

   244          <li><a href="#svg-transform-value"><span class=secno>13.2.3.1.

   245           </span> The <var>&lt;translation-value&gt;</var> and

   246           <var>&lt;length&gt;</var> type </a>

   248          <li><a href="#svg-angle"><span class=secno>13.2.3.2. </span> The

   249           <var>&lt;angle&gt;</var> type </a>

   251          <li><a href="#svg-number"><span class=secno>13.2.3.3. </span> The

   252           <var>&lt;number&gt;</var> type </a>

   253         </ul>

   254       </ul>

   256      <li><a href="#svg-gradient-transform-pattern-transform"><span

   257       class=secno>13.3. </span> The SVG ‘<code

   258       class=property>gradientTransform</code>’ and ‘<code

   259       class=property>patternTransform</code>’ attributes </a>

   261      <li><a href="#svg-transform-functions"><span class=secno>13.4. </span>

   262       SVG transform functions </a>

   264      <li><a href="#svg-three-dimensional-functions"><span class=secno>13.5.

   265       </span>SVG and 3D transform functions</a>

   267      <li><a href="#svg-user-coordinate-space"><span class=secno>13.6. </span>

   268       User coordinate space </a>

   270      <li><a href="#transform-attribute-dom"><span class=secno>13.7. </span>

   271       SVG DOM interface for the ‘<code class=property>transform</code>’

   272       attribute </a>

   273     </ul>

   275    <li><a href="#svg-animation"><span class=secno>14. </span> SVG Animation

   276     </a>

   277     <ul class=toc>

   278      <li><a href="#svg-animate-element"><span class=secno>14.1. </span> The

   279       ‘<code class=property>animate</code>’ and ‘<code

   280       class=property>set</code>’ element </a>

   282      <li><a href="#neutral-element"><span class=secno>14.2. </span> Neutral

   283       element for addition </a>

   285      <li><a href="#svg-attribute-name"><span class=secno>14.3. </span> The

   286       SVG ‘<code class=property>attributeName</code>’ attribute </a>

   287     </ul>

   289    <li><a href="#transform-functions"><span class=secno>15. </span> The

   290     Transform Functions </a>

   291     <ul class=toc>

   292      <li><a href="#two-d-transform-functions"><span class=secno>15.1.

   293       </span>2D Transform Functions</a>

   295      <li><a href="#three-d-transform-functions"><span class=secno>15.2.

   296       </span>3D Transform Functions</a>

   297     </ul>

   299    <li><a href="#transform-function-lists"><span class=secno>16. </span> The

   300     Transform Function Lists </a>

   302    <li><a href="#animation"><span class=secno>17. </span> Interpolation of

   303     Transforms </a>

   305    <li><a href="#transform-primitives"><span class=secno>18. </span>

   306     Transform function primitives and derivatives </a>

   308    <li><a href="#interpolation-of-transform-functions"><span class=secno>19.

   309     </span> Interpolation of primitives and derived transform functions </a>

   311    <li><a href="#matrix-interpolation"><span class=secno>20. </span>

   312     Interpolation of Matrices </a>

   313     <ul class=toc>

   314      <li><a href="#matrix-decomposing"><span class=secno>20.1.

   315       </span>Decomposing the Matrix</a>

   317      <li><a href="#matrix-values-interpolation"><span class=secno>20.2.

   318       </span> Interpolation of decomposed matrix values </a>

   320      <li><a href="#matrix-recomposing"><span class=secno>20.3. </span>

   321       Recomposing the Matrix </a>

   322     </ul>

   324    <li><a href="#mathematical-description"><span class=secno>21. </span>

   325     Mathematical Description of Transform Functions </a>

   327    <li><a href="#references"><span class=secno>22. </span>References</a>

   328     <ul class=toc>

   329      <li class=no-num><a href="#normative-references">Normative

   330       references</a>

   332      <li class=no-num><a href="#other-references">Other references</a>

   333     </ul>

   335    <li class=no-num><a href="#property-index">Property index</a>

   337    <li class=no-num><a href="#index">Index</a>

   338   </ul>

   339   <!--end-toc-->

   341   <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

   343   <p><em>This section is not normative.</em>

   345   <p> The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual

   346    formatting model</a> describes a coordinate system within each element is

   347    positioned. Positions and sizes in this coordinate space can be thought of

   348    as being expressed in pixels, starting in the origin of point with

   349    positive values proceeding to the right and down.

   351   <p> This coordinate space can be modified with the ‘<a

   352    href="#effects"><code class=property>transform</code></a>’ property.

   353    Using transform, elements can be translated, rotated and scaled in two or

   354    three dimensional space.

   356   <p> Additional properties make working with transforms easier, and allow

   357    the author to control how nested three-dimensional transforms interact.

   359   <ul>

   360    <li> The ‘<a href="#transform-origin"><code

   361     class=property>transform-origin</code></a>’ property provides a

   362     convenient way to control the origin about which transforms on an element

   363     are applied.

   365    <li> The ‘<a href="#perspective"><code

   366     class=property>perspective</code></a>’ property allows the author to

   367     make child elements with three-dimensional transforms appear as if they

   368     live in a common three-dimensional space. The ‘<a

   369     href="#perspective-origin"><code

   370     class=property>perspective-origin</code></a>’ property provides control

   371     over the origin at which perspective is applied, effectively changing the

   372     location of the "vanishing point".

   374    <li> The ‘<a href="#transform-style"><code

   375     class=property>transform-style</code></a>’ property allows

   376     3D-transformed elements and their 3D-transformed descendants to share a

   377     common three-dimensional space, allowing the construction of hierarchies

   378     of three-dimensional objects.

   380    <li> The ‘<a href="#backface-visibility"><code

   381     class=property>backface-visibility</code></a>’ property comes into play

   382     when an element is flipped around via three-dimensional transforms such

   383     that its reverse side is visible to the viewer. In some situations it is

   384     desirable to hide the element in this situation, which is possible using

   385     the value of ‘<code class=css>hidden</code>’ for this property.

   386   </ul>

   388   <p> Note that while some values of the ‘<a href="#effects"><code

   389    class=property>transform</code></a>’ property allow an element to be

   390    transformed in a three-dimensional coordinate system, the elements

   391    themselves are not three-dimensional objects. Instead, they exist on a

   392    two-dimensional plane (a flat surface) and have no depth.</p>

   393   <!-- ======================================================================================================= -->

   395   <h2 id=module-interactions><span class=secno>2. </span>Module Interactions</h2>

   397   <p>This module defines a set of CSS properties that affect the visual

   398    rendering of elements to which those properties are applied; these effects

   399    are applied after elements have been sized and positioned according to the

   400    <a href="http://www.w3.org/TR/CSS2/visuren.html"

   401    title="Visual formatting model">Visual formatting model</a> from <a

   402    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of

   403    these properties result in the creation of a <a

   404    href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"

   405    title="Visual formatting model">containing block</a>, and/or the creation

   406    of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"

   407    title="Visual formatting model">stacking context</a>.

   409   <p> Three-dimensional transforms can also affect the visual layering of

   410    elements, and thus override the back-to-front painting order described in

   411    <a href="http://www.w3.org/TR/CSS2/zindex.html"

   412    title="Elaborate description of Stacking Contexts">Appendix E</a> of <a

   413    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

   415   <p> Transforms affect the rendering of backgounds on elements with a value

   416    of ‘<code class=css>fixed</code>’ for the ‘<code class=css><code

   417    class=property><a

   418    href="http://www.w3.org/TR/css3-background/#the-background-attachment">background-attachment</a></code></code>’

   419    property, which is specified in <a href="#CSS3BG"

   420    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.

   422   <h2 id=css-values><span class=secno>3. </span>CSS Values</h2>

   424   <p>This specification follows the <a

   425    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property

   426    definition conventions</a> from <a href="#CSS21"

   427    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in

   428    this specification are defined in CSS Level 2 Revision 1 <a

   429    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

   431   <p>In addition to the property-specific values listed in their definitions,

   432    all properties defined in this specification also accept the <a

   433    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>

   434    keyword as their property value. For readability it has not been repeated

   435    explicitly.

   437   <h2 id=definitions><span class=secno>4. </span>Definitions</h2>

   439   <p> When used in this specification, terms have the meanings assigned in

   440    this section.

   442   <dl>

   443    <dt id=TermBoundingBox><dfn id=bounding-box>bounding box</dfn>

   445    <dd>

   446     <p> A bounding box is the object bounding box for all SVG elements

   447      without an associated CSS layout box and the border box for all other

   448      elements. The bounding box of a table is the border box of its <a

   449      href="http://www.w3.org/TR/CSS21/tables.html#model">table wrapper

   450      box</a>, not its table box.

   452    <dt id=TermTransformableElement><dfn

   453     id=transformable-element>transformable element</dfn>

   455    <dd>

   456     <p> A transformable element is an element in one of these categories:

   458     <ul>

   459      <li> an element whose layout is governed by the CSS box model which is

   460       either a <a

   461       href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>

   462       or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic

   463       inline-level element</a>, or whose ‘<code

   464       class=property>display</code>’ property computes to ‘<code

   465       class=css>table-row</code>’, ‘<code

   466       class=css>table-row-group</code>’, ‘<code

   467       class=css>table-header-group</code>’, ‘<code

   468       class=css>table-footer-group</code>’, ‘<code

   469       class=css>table-cell</code>’, or ‘<code

   470       class=css>table-caption</code>’ <a href="#CSS21"

   471       rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

   473      <li> an element in the SVG namespace and not governed by the CSS box

   474       model which has the attributes ‘<a href="#effects"><code

   475       class=property>transform</code></a>’, ‘<code

   476       class=property>patternTransform</code>’ or ‘<code

   477       class=property>gradientTransform</code>’ <a href="#SVG11"

   478       rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>

   479     </ul>

   481    <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local

   482     coordinate system</dfn>

   484    <dd>

   485     <p> In general, a coordinate system defines locations and distances on

   486      the current canvas. The current local coordinate system (also user

   487      coordinate system) is the coordinate system that is currently active and

   488      which is used to define how coordinates and lengths are located and

   489      computed, respectively, on the current canvas.

   491    <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user

   492     coordinate system</dfn>

   494    <dd>

   495     <p> See definition of <a class=term href="#local-coordinate-system">local

   496      coordinate system</a>.

   498    <dt id=TermPerspectiveMatrix><dfn id=perspective-matrix>perspective

   499     matrix</dfn>

   501    <dd>

   502     <p> A matrix computed from the values of the ‘<a

   503      href="#perspective"><code class=property>perspective</code></a>’ and

   504      ‘<a href="#perspective-origin"><code

   505      class=property>perspective-origin</code></a>’ properties as described

   506      <a href="#perspective-matrix-computation">below</a>.

   508    <dt id=TermTransformationMatrix><dfn

   509     id=transformation-matrix>transformation matrix</dfn>

   511    <dd>

   512     <p> A matrix that defines the mathematical mapping from one coordinate

   513      system into another. It is computed from the values of the ‘<a

   514      href="#effects"><code class=property>transform</code></a>’ and ‘<a

   515      href="#transform-origin"><code

   516      class=property>transform-origin</code></a>’ properties as described <a

   517      href="#transformation-matrix-computation">below</a>.

   519    <dt id=TermCurrentTransformationMatrix><dfn

   520     id=current-transformation-matrix-ctm>current transformation matrix

   521     (CTM)</dfn>

   523    <dd>

   524     <p> A matrix that defines the mapping from the local coordinate system

   525      into the viewport coordinate system.

   527    <dt id=TermAccumulated3DTransformationMatrix> <dfn

   528     id=accumulated-3d-transformation-matrix>accumulated 3D transformation

   529     matrix</dfn>

   531    <dd>

   532     <p> A matrix computed for elements in a <a href="#d-rendering-context">3D

   533      rendering context</a>, as described <a

   534      href="#accumulated-3d-transformation-matrix-computation">below</a>.

   536    <dt id=TermIdentityTransformFunction> <dfn

   537     id=identity-transform-function>identity transform function</dfn>

   539    <dd>

   540     <p> A <a href="#transform-functions">transform function</a> that is

   541      equivalent to a identity 4x4 matrix (see <a

   542      href="#mathematical-description">Mathematical Description of Transform

   543      Functions</a>). Examples for identity transform functions are ‘<code

   544      class=css>translate(0)</code>’, ‘<code class=css>translate3d(0, 0,

   545      0)</code>’, ‘<code class=css>translateX(0)</code>’, ‘<code

   546      class=css>translateY(0)</code>’, ‘<code

   547      class=css>translateZ(0)</code>’, ‘<code

   548      class=css>scale(1)</code>’, ‘<code class=css>scaleX(1)</code>’,

   549      ‘<code class=css>scaleY(1)</code>’, ‘<code

   550      class=css>scaleZ(1)</code>’, ‘<code class=css>rotate(0)</code>’,

   551      ‘<code class=css>rotate3d(1, 1, 1, 0)</code>’, ‘<code

   552      class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,

   553      ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,

   554      0)</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code

   555      class=css>skewY(0)</code>’, ‘<code class=css>matrix(1, 0, 0, 1, 0,

   556      0)</code>’ and ‘<code class=css>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0,

   557      0, 1, 0, 0, 0, 0, 1)</code>’. A special case is perspective: ‘<code

   558      class=css>perspective(infinity)</code>’. The value of m<sub>34</sub>

   559      becomes infinitesimal small and the transform function is therefore

   560      assumed to be equal to the identity matrix.

   562    <dt id=Term3DRenderingContext><dfn id=d-rendering-context>3D rendering

   563     context</dfn>

   565    <dd>

   566     <p> A containing block hierarchy of one or more levels, instantiated by

   567      elements with a computed value for the ‘<a

   568      href="#transform-style"><code

   569      class=property>transform-style</code></a>’ property of ‘<code

   570      class=css>preserve-3d</code>’, whose elements share a common

   571      three-dimensional coordinate system.

   572   </dl>

   573   <!-- ======================================================================================================= -->

   575   <h2 id=two-dimensional-subset><span class=secno>5. </span> Two Dimensional

   576    Subset</h2>

   578   <p> UAs may not always be able to render three-dimensional transforms and

   579    then just support a two-dimensional subset of this specification. In this

   580    case <a href="#three-d-transform-functions">three-dimensional

   581    transforms</a> and the properties ‘<a href="#transform-style"><code

   582    class=property>transform-style</code></a>’, ‘<a

   583    href="#perspective"><code class=property>perspective</code></a>’, ‘<a

   584    href="#perspective-origin"><code

   585    class=property>perspective-origin</code></a>’ and ‘<a

   586    href="#backface-visibility"><code

   587    class=property>backface-visibility</code></a>’ must not be supported.

   588    Section <a href="#transform-3d-rendering">3D Transform Rendering</a> does

   589    not apply. Matrix decomposing uses the technique taken from the "unmatrix"

   590    method in "Graphics Gems II, edited by Jim Arvo", simplified for the 2D

   591    case. Section <a href="#mathematical-description">Mathematical Description

   592    of Transform Functions</a> is still effective but can be reduced by using

   593    a 3x3 transformation matrix where <em>a</em> equals

   594    <em>m<sub>11</sub></em>, <em>b</em> equals <em>m<sub>12</sub></em>,

   595    <em>c</em> equals <em>m<sub>21</sub></em>, <em>d</em> equals

   596    <em>m<sub>22</sub></em>, <em>e</em> equals <em>m<sub>41</sub></em> and

   597    <em>f</em> equals <em>m<sub>42</sub></em> (see <a href="#MatrixDefined">A

   598    2D 3x2 matrix with six parameter</a>).

   600   <div class=figure> <img alt="3x3 matrix" height=79 src=3x3matrix.png

   601    title="\begin{bmatrix} a & c & e \\ b             & d & f \\ 0 & 0 & 1 \end{bmatrix}"

   602    width=82>

   603    <p class=caption> 3x3 matrix for two-dimensional transformations.

   604   </div>

   606   <div class=example>

   607    <p> Authors can easily provide a fallback if UAs do not provide support

   608     for three-dimensional transforms. The following example has two property

   609     definitions for ‘<a href="#effects"><code

   610     class=property>transform</code></a>’. The first one consists of two

   611     two-dimensional transform functions. The second one has a two-dimensional

   612     and a three-dimensional transform function.

   614    <pre>div {

   615     transform: scale(2) rotate(45deg);

   616     transform: scale(2) rotate3d(0, 0, 1, 45deg);

   617 }</pre>

   619    <p> With 3D support, the second definition will override the first one.

   620     Without 3D support, the second definition is invalid and a UA falls back

   621     to the first definition.

   622   </div>

   623   <!-- ======================================================================================================= -->

   625   <h2 id=transform-rendering><span class=secno>6. </span>The Transform

   626    Rendering Model</h2>

   628   <p><em>This section is normative.</em>

   630   <p> Specifying a value other than ‘<code class=css>none</code>’ for the

   631    ‘<a href="#effects"><code class=css>transform</code></a>’ property

   632    establishes a new <a class=term href="#local-coordinate-system">local

   633    coordinate system</a> at the element that it is applied to. The mapping

   634    from where the element would have rendered into that local coordinate

   635    system is given by the element's <a class=term

   636    href="#transformation-matrix">transformation matrix</a>. Transformations

   637    are cumulative. That is, elements establish their local coordinate system

   638    within the coordinate system of their parent. From the perspective of the

   639    user, an element effectively accumulates all the ‘<a

   640    href="#effects"><code class=property>transform</code></a>’ properties of

   641    its ancestors as well as any local transform applied to it. The

   642    accumulation of these transforms defines a <a class=term

   643    href="#current-transformation-matrix-ctm">current transformation matrix

   644    (CTM)</a> for the element.

   646   <p> The coordinate space is a coordinate system with two axes: the X axis

   647    increases horizontally to the right; the Y axis increases vertically

   648    downwards. Three-dimensional transform functions extend this coordinate

   649    space into three dimensions, adding a Z axis perpendicular to the plane of

   650    the screen, that increases towards the viewer.

   652   <div class=figure> <img alt="Demonstration of the initial coordinate space"

   653    height=240 src=coordinates.svg width=270>

   654    <p class=caption> Demonstration of the initial coordinate space.

   655   </div>

   657   <p id=transformation-matrix-computation> The <a class=term

   658    href="#transformation-matrix">transformation matrix</a> is computed from

   659    the ‘<a href="#effects"><code class=property>transform</code></a>’ and

   660    ‘<a href="#transform-origin"><code

   661    class=property>transform-origin</code></a>’ properties as follows:

   663   <ol>

   664    <li>Start with the identity matrix.

   666    <li>Translate by the computed X, Y and Z values of ‘<a

   667     href="#transform-origin"><code

   668     class=property>transform-origin</code></a>’

   670    <li>Multiply by each of the transform functions in ‘<a

   671     href="#effects"><code class=property>transform</code></a>’ property

   672     from left to right

   674    <li>Translate by the negated computed X, Y and Z values of ‘<a

   675     href="#transform-origin"><code

   676     class=property>transform-origin</code></a>’

   677   </ol>

   679   <p> Transforms apply to <a class=term

   680    href="#transformable-element">transformable elements</a>.

   682   <div class=example>

   683    <pre>

   684 div {

   685     transform: translate(100px, 100px);

   686 }

   687 </pre>

   689    <p>This transform moves the element by 100 pixels in both the X and Y

   690     directions.

   692    <div class=figure> <img alt="The 100px translation in X and Y" height=250

   693     src="examples/translate1.svg" width=470></div>

   694   </div>

   696   <div class=example>

   697    <pre>div {

   698     height: 100px; width: 100px;

   699     transform-origin: 50px 50px;

   700     transform: rotate(45deg);

   701 }</pre>

   703    <p> The ‘<a href="#transform-origin"><code

   704     class=property>transform-origin</code></a>’ property moves the point of

   705     origin by 50 pixels in both the X and Y directions. The transform rotates

   706     the element clockwise by 45° about the point of origin. After all

   707     transform functions were applied, the translation of the origin gets

   708     translated back by -50 pixels in both the X and Y directions.

   710    <div class=figure> <img

   711     alt="The point of origin gets translated temporary" height=250

   712     src="examples/origin1.svg" width=735></div>

   713   </div>

   715   <div class=example>

   716    <pre>

   717 div {

   718     height: 100px; width: 100px;

   719     transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);

   720 }

   721 </pre>

   723    <p> This transform moves the element by 80 pixels in both the X and Y

   724     directions, then scales the element by 150%, then rotates it 45°

   725     clockwise about the Z axis. Note that the scale and rotation operate

   726     about the center of the element, since the element has the default

   727     transform-origin of ‘<code class=css>50% 50%</code>’.

   729    <div class=figure> <img alt="The transform specified above" height=270

   730     src="examples/compound_transform.svg" width=270></div>

   732    <p> Note that an identical rendering can be obtained by nesting elements

   733     with the equivalent transforms:

   735    <pre>

   736 &lt;div style="transform: translate(80px, 80px)"&gt;

   737     &lt;div style="transform: scale(1.5, 1.5)"&gt;

   738         &lt;div style="transform: rotate(45deg)"&gt;&lt;/div&gt;

   739     &lt;/div&gt;

   740 &lt;/div&gt;</pre>

   741   </div>

   743   <p> For elements whose layout is governed by the CSS box model, the

   744    transform property does not affect the flow of the content surrounding the

   745    transformed element. However, the extent of the overflow area takes into

   746    account transformed elements. This behavior is similar to what happens

   747    when elements are offset via relative positioning. Therefore, if the value

   748    of the ‘<code class=property>overflow</code>’ property is ‘<code

   749    class=css>scroll</code>’ or ‘<code class=css>auto</code>’,

   750    scrollbars will appear as needed to see content that is transformed

   751    outside the visible area.

   753   <p> For elements whose layout is governed by the CSS box model, any value

   754    other than ‘<code class=css>none</code>’ for the transform results in

   755    the creation of both a stacking context and a containing block. The object

   756    acts as a containing block for fixed positioned descendants.

   758   <p class=issue> Is this effect on position:fixed necessary? If so, need to

   759    go into more detail here about why fixed positioned objects should do

   760    this, i.e., that it's much harder to implement otherwise. See <a

   761    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>.

   763   <p> <a href="http://www.w3.org/TR/css3-background/#fixed0">Fixed

   764    backgrounds</a> on the root element are affected by any transform

   765    specified for that element. For all other elements that are effected by a

   766    transform (i.e. have a transform applied to them, or to any of their

   767    ancestor elements), a value of ‘<code class=css>fixed</code>’ for the

   768    ‘<code class=property>background-attachment</code>’ property is

   769    treated as if it had a value of ‘<code class=css>scroll</code>’. The

   770    computed value of ‘<code class=property>background-attachment</code>’

   771    is not affected.

   773   <p class=note> If the root element is transformed, the transformation

   774    applies to the entire canvas, including any background specified for the

   775    root element. Since <a

   776    href="http://www.w3.org/TR/css3-background/#special-backgrounds"> the

   777    background painting area for the root element</a> is the entire canvas,

   778    which is infinite, the transformation might cause parts of the background

   779    that were originally off-screen to appear. For example, if the root

   780    element's background were repeating dots, and a transformation of ‘<code

   781    class=css>scale(0.5)</code>’ were specified on the root element, the

   782    dots would shrink to half their size, but there will be twice as many, so

   783    they still cover the whole viewport.

   785   <h3 id=transform-3d-rendering><span class=secno>6.1. </span>3D Transform

   786    Rendering</h3>

   788   <p> Normally, elements render as flat planes, and are rendered into the

   789    same plane as their containing block. Often this is the plane shared by

   790    the rest of the page. Two-dimensional transform functions can alter the

   791    appearance of an element, but that element is still rendered into the same

   792    plane as its containing block.

   794   <p> Three-dimensional transforms can result in transformation matrices with

   795    a non-zero Z component (where the Z axis projects out of the plane of the

   796    screen). This can result in an element rendering on a different plane than

   797    that of its containing block. This may affect the front-to-back rendering

   798    order of that element relative to other elements, as well as causing it to

   799    intersect with other elements. This behavior depends on whether the

   800    element is a member of a <a class=term href="#d-rendering-context">3D

   801    rendering context</a>, as described below.

   803   <div class=issue>

   804    <p class=desc>This description does not exactly match what WebKit

   805     implements. Perhaps it should be changed to match current

   806     implementations? See <a

   807     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19637">Bug

   808     19637</a>.

   809   </div>

   811   <div class=example>

   812    <p>This example shows the effect of three-dimensional transform applied to

   813     an element.

   815    <pre>

   816 &lt;style&gt;

   817 div {

   818     height: 150px;

   819     width: 150px;

   820 }

   821 .container {

   822     border: 1px solid black;

   823 }

   824 .transformed {

   825     transform: rotateY(50deg);

   826 }

   827 &lt;/style&gt;

   829 &lt;div class="container"&gt;

   830     &lt;div class="transformed"&gt;&lt;/div&gt;

   831 &lt;/div&gt;

   832 </pre>

   834    <div class=figure> <img alt="Div with a rotateY transform." height=190

   835     src="examples/simple-3d-example.png" width=210></div>

   837    <p>The transform is a 50° rotation about the vertical, Y axis. Note how

   838     this makes the blue box appear narrower, but not three-dimensional.

   839   </div>

   841   <p> The ‘<a href="#perspective"><code

   842    class=property>perspective</code></a>’ and ‘<a

   843    href="#perspective-origin"><code

   844    class=property>perspective-origin</code></a>’ properties can be used to

   845    add a feeling of depth to a scene by making elements higher on the Z axis

   846    (closer to the viewer) appear larger, and those further away to appear

   847    smaller. The scaling is proportional to <var>d</var>/(<var>d</var> −

   848    <var>Z</var>) where <var>d</var>, the value of ‘<a

   849    href="#perspective"><code class=property>perspective</code></a>’, is the

   850    distance from the drawing plane to the the assumed position of the

   851    viewer's eye.

   853   <div class=figure> <img alt="Diagram of scale vs. Z position"

   854    src="perspective_distance.png">

   855    <p class=caption> Diagrams showing how scaling depends on the ‘<a

   856     href="#perspective"><code class=property>perspective</code></a>’

   857     property and Z position. In the top diagram, <var>Z</var> is half of

   858     <var>d</var>. In order to make it appear that the original circle (solid

   859     outline) appears at <var>Z</var> (dashed circle), the circle is scaled up

   860     by a factor of two, resulting in the light blue circle. In the bottom

   861     diagram, the circle is scaled down by a factor of one-third to make it

   862     appear behind the original position.

   863   </div>

   865   <p> Normally the assumed position of the viewer's eye is centered on a

   866    drawing. This position can be moved if desired – for example, if a web

   867    page contains multiple drawings that should share a common perspective –

   868    by setting ‘<a href="#perspective-origin"><code

   869    class=property>perspective-origin</code></a>’.

   871   <div class=figure> <img alt="Diagram of different perspective-origin"

   872    src="perspective_origin.png">

   873    <p class=caption> Diagram showing the effect of moving the perspective

   874     origin upward.

   875   </div>

   877   <p id=perspective-matrix-computation> The <a

   878    href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as

   879    follows:

   881   <ol>

   882    <li>Start with the identity matrix.

   884    <li>Translate by the computed X and Y values of ‘<a

   885     href="#perspective-origin"><code

   886     class=property>perspective-origin</code></a>’

   888    <li>Multiply by the matrix that would be obtained from the ‘<code

   889     class=css><a href="#perspective-function"><code

   890     class=css>perspective(&lt;length&gt;)</code></a></code>’ transform

   891     function, where the length is provided by the value of the ‘<a

   892     href="#perspective"><code class=property>perspective</code></a>’

   893     property

   895    <li>Translate by the negated computed X and Y values of ‘<a

   896     href="#perspective-origin"><code

   897     class=property>perspective-origin</code></a>’

   898   </ol>

   900   <div class=example>

   901    <p>This example shows how perspective can be used to cause

   902     three-dimensional transforms to appear more realistic.

   904    <pre>

   905 &lt;style&gt;

   906 div {

   907     height: 150px;

   908     width: 150px;

   909 }

   910 .container {

   911     perspective: 500px;

   912     border: 1px solid black;

   913 }

   914 .transformed {

   915     transform: rotateY(50deg);

   916 }

   917 &lt;/style&gt;

   919 &lt;div class="container"&gt;

   920     &lt;div class="transformed"&gt;&lt;/div&gt;

   921 &lt;/div&gt;

   922 </pre>

   924    <div class=figure> <img

   925     alt="Div with a rotateY transform,                     and perspective on its container"

   926     height=190 src="examples/simple-perspective-example.png" width=210></div>

   928    <p>The inner element has the same transform as in the previous example,

   929     but its rendering is now influenced by the perspective property on its

   930     parent element. Perspective causes vertices that have positive Z

   931     coordinates (closer to the viewer) to be scaled up in X and Y, and those

   932     further away (negative Z coordinates) to be scaled down, giving an

   933     appearance of depth.

   934   </div>

   936   <p> An element with a three-dimensional transform that is not contained in

   937    a <a class=term href="#d-rendering-context">3D rendering context</a>

   938    renders with the appropriate transform applied, but does not intersect

   939    with any other elements. The three-dimensional transform in this case can

   940    be considered just as a painting effect, like two-dimensional transforms.

   941    Similarly, the transform does not affect painting order. For example, a

   942    transform with a positive Z translation may make an element look larger,

   943    but does not cause that element to render in front of elements with no

   944    translation in Z.

   946   <p> An element with a three-dimensional transform that is contained in a <a

   947    class=term href="#d-rendering-context">3D rendering context</a> can

   948    visibly interact with other elements in that same 3D rendering context;

   949    the set of elements participating in the same <a class=term

   950    href="#d-rendering-context">3D rendering context</a> may obscure each

   951    other or intersect, based on their computed transforms. They are rendered

   952    as if they are all siblings, positioned in a common 3D coordinate space.

   953    The position of each element in that three-dimensional space is determined

   954    by accumulating the transformation matrices up from the element that

   955    establishes the <a class=term href="#d-rendering-context">3D rendering

   956    context</a> through each element that is a containing block for the given

   957    element, as described below.

   959   <div class=example>

   960    <pre>

   961 &lt;style&gt;

   962 div {

   963     height: 150px;

   964     width: 150px;

   965 }

   966 .container {

   967     perspective: 500px;

   968     border: 1px solid black;

   969 }

   970 .transformed {

   971     transform: rotateY(50deg);

   972     background-color: blue;

   973 }

   974 .child {

   975     transform-origin: top left;

   976     transform: rotateX(40deg);

   977     background-color: lime;

   978 }

   979 &lt;/style&gt;

   981 &lt;div class="container"&gt;

   982     &lt;div class="transformed"&gt;

   983         &lt;div class="child"&gt;&lt;/div&gt;

   984     &lt;/div&gt;

   985 &lt;/div&gt;

   986 </pre>

   988    <p>This example shows how nested 3D transforms are rendered in the absence

   989     of ‘<code class=css>transform-style: preserve-3d</code>’. The blue

   990     div is transformed as in the previous example, with its rendering

   991     influenced by the perspective on its parent element. The lime element

   992     also has a 3D transform, which is a rotation about the X axis (anchored

   993     at the top, by virtue of the transform-origin). However, the lime element

   994     is being rendered into the plane of its parent because it is not a member

   995     of a 3D rendering context; the parent is "flattening".

   997    <div class=figure> <img alt="Nested 3D transforms, with flattening"

   998     height=200 src="examples/3d-rendering-context-flat.png" width=240></div>

   999   </div>

  1001   <p>Elements establish and participate in 3D rendering contexts as follows:

  1003   <ul>

  1004    <li> A <a class=term href="#d-rendering-context">3D rendering context</a>

  1005     is established by a a <a class=term

  1006     href="#transformable-element">transformable element</a> whose computed

  1007     value for ‘<a href="#transform-style"><code

  1008     class=property>transform-style</code></a>’ is ‘<code

  1009     class=css>preserve-3d</code>’, and which itself is not part of a 3D

  1010     rendering context. Note that such an element is always a containing

  1011     block. An element that establishes a 3D rendering context also

  1012     participates in that context.

  1014    <li> An element whose computed value for ‘<a

  1015     href="#transform-style"><code

  1016     class=property>transform-style</code></a>’ is ‘<code

  1017     class=css>preserve-3d</code>’, and which itself participates in a <a

  1018     class=term href="#d-rendering-context">3D rendering context</a>, extends

  1019     that 3D rendering context rather than establishing a new one.

  1021    <li> An element participates in a <a class=term

  1022     href="#d-rendering-context">3D rendering context</a> if its containing

  1023     block establishes or extends a <a class=term

  1024     href="#d-rendering-context">3D rendering context</a>.

  1025   </ul>

  1027   <p id=accumulated-3d-transformation-matrix-computation> The final value of

  1028    the transform used to render an element in a <a class=term

  1029    href="#d-rendering-context">3D rendering context</a> is computed by

  1030    accumulating an <a href="#TermAccumulated3DTransformationMatrix">

  1031    accumulated 3D transformation matrix</a> as follows:

  1033   <ol>

  1034    <li>Start with the identity matrix.

  1036    <li>For each containing block between the root of the <a class=term

  1037     href="#d-rendering-context">3D rendering context</a> and the element in

  1038     question:

  1039     <ol>

  1040      <li>multiply the accumulated matrix with the <a class=term

  1041       href="#perspective-matrix">perspective matrix</a> on the element's

  1042       containing block (if any). That containing block is not necessarily a

  1043       member of the 3D rendering context.

  1045      <li>apply to the accumulated matrix a translation equivalent to the

  1046       horizontal and vertical offset of the element relative to its

  1047       containing block as specified by the CSS visual formatting model.

  1049      <li>multiply the accumulated matrix with the <a class=term

  1050       href="#transformation-matrix">transformation matrix</a>.

  1051     </ol>

  1052   </ol>

  1054   <div class=example>

  1055    <pre>

  1056 &lt;style&gt;

  1057 div {

  1058     height: 150px;

  1059     width: 150px;

  1060 }

  1061 .container {

  1062     perspective: 500px;

  1063     border: 1px solid black;

  1064 }

  1065 .transformed {

  1066     <b>transform-style: preserve-3d</b>;

  1067     transform: rotateY(50deg);

  1068     background-color: blue;

  1069 }

  1070 .child {

  1071     transform-origin: top left;

  1072     transform: rotateX(40deg);

  1073     background-color: lime;

  1074 }

  1075 &lt;/style&gt;

  1076 </pre>

  1078    <p> This example is identical to the previous example, with the addition

  1079     of ‘<code class=css>transform-style: preserve-3d</code>’ on the blue

  1080     element. The blue element now establishes a 3D rendering context, of

  1081     which the lime element is a member. Now both blue and lime elements share

  1082     a common three-dimensional space, so the lime element renders as tilting

  1083     out from its parent, influenced by the perspective on the container.

  1085    <div class=figure> <img alt="Nested 3D transforms, with preserve-3d."

  1086     height=200 src="examples/3d-rendering-context-3d.png" width=240></div>

  1087   </div>

  1089   <p> Elements in the same <a class=term href="#d-rendering-context">3D

  1090    rendering context</a> may intersect with each other. User agents must

  1091    render intersection by subdividing the planes of intersecting elements as

  1092    described by <a

  1093    href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's

  1094    algorithm</a>.

  1096   <p> Untransformed elements in a <a class=term

  1097    href="#d-rendering-context">3D rendering context</a> render on the Z=0

  1098    plane, yet may still intersect with transformed elements.

  1100   <p> Within a <a class=term href="#d-rendering-context">3D rendering

  1101    context</a>, the rendering order of non-intersecting elements is based on

  1102    their position on the Z axis after the application of the accumulated

  1103    transform. Elements at the same Z position render in <a

  1104    href="http://www.w3.org/TR/CSS2/zindex.html#painting-order">stacking

  1105    context order</a>.

  1107   <div class=example>

  1108    <pre>

  1109 &lt;style&gt;

  1110 .container {

  1111     background-color: rgba(0, 0, 0, 0.3);

  1112     transform-style: preserve-3d;

  1113     perspective: 500px;

  1114 }

  1115 .container > div {

  1116     position: absolute;

  1117     left: 0;

  1118 }

  1119 .container > :first-child {

  1120     transform: rotateY(45deg);

  1121     background-color: orange;

  1122     top: 10px;

  1123     height: 135px;

  1124 }

  1125 .container > :last-child {

  1126     transform: translateZ(40px);

  1127     background-color: rgba(0, 0, 255, 0.75);

  1128     top: 50px;

  1129     height: 100px;

  1130 }

  1131 &lt;/style&gt;

  1133 &lt;div class="container"&gt;

  1134     &lt;div&gt;&lt;/div&gt;

  1135     &lt;div&gt;&lt;/div&gt;

  1136 &lt;/div&gt;

  1137 </pre>

  1139    <p> This example shows show elements in a 3D rendering context can

  1140     intersect. The container element establishes a 3D rendering context for

  1141     itself and its two children. The children intersect with eachother, and

  1142     the orange element also intersects with the container.

  1144    <div class=figure> <img alt="Intersecting sibling elements." height=200

  1145     src="examples/3d-intersection.png" width=200></div>

  1146   </div>

  1148   <p> Using three-dimensional transforms, it's possible to transform an

  1149    element such that its reverse side is towards the viewer. 3D-transformed

  1150    elements show the same content on both sides, so the reverse side looks

  1151    like a mirror-image of the front side (as if the element were projected

  1152    onto a sheet of glass). Normally, elements whose reverse side is towards

  1153    the viewer remain visible. However, the ‘<a

  1154    href="#backface-visibility"><code

  1155    class=property>backface-visibility</code></a>’ property allows the

  1156    author to make an element invisible when its reverse side is towards the

  1157    viewer. This behavior is "live"; if an element with ‘<code

  1158    class=css>backface-visibility: hidden</code>’ were animating, such that

  1159    its front and reverse sides were alternately visible, then it would only

  1160    be visible when the front side were towards the viewer.

  1162   <h3 id=processing-of-perspective-transformed-boxes><span class=secno>6.2.

  1163    </span> Processing of Perspective-Transformed Boxes</h3>

  1165   <div class=issue>

  1166    <p class=desc> This is a first pass at an attempt to precisely specify how

  1167     exactly to transform elements using the provided matrices. It might not

  1168     be ideal, and implementer feedback is encouraged. See <a

  1169     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15605">bug

  1170     15605</a>.

  1171   </div>

  1173   <p> The <a class=term

  1174    href="#accumulated-3d-transformation-matrix">accumulated 3D transformation

  1175    matrix</a> is a 4×4 matrix, while the objects to be transformed are

  1176    two-dimensional boxes. To transform each corner (<var>a</var>,

  1177    <var>b</var>) of a box, the matrix must first be applied to (<var>a</var>,

  1178    <var>b</var>, 0, 1), which will result in a four-dimensional point

  1179    (<var>x</var>, <var>y</var>, <var>z</var>, <var>w</var>). This is

  1180    transformed back to a three-dimensional point (<var>x</var>′,

  1181    <var>y</var>′, <var>z</var>′) as follows:

  1183   <p> If <var>w</var> &gt; 0, (<var>x</var>′, <var>y</var>′,

  1184    <var>z</var>′) = (<var>x</var>/<var>w</var>, <var>y</var>/<var>w</var>,

  1185    <var>z</var>/<var>w</var>).

  1187   <p> If <var>w</var> = 0, (<var>x</var>′, <var>y</var>′,

  1188    <var>z</var>′) = (<var>x</var> ⋅ <var>n</var>, <var>y</var> ⋅

  1189    <var>n</var>, <var>z</var> ⋅ <var>n</var>). <var>n</var> is an

  1190    implementation-dependent value that should be chosen so that

  1191    <var>x</var>′ or <var>y</var>′ is much larger than the viewport size,

  1192    if possible. For example, (5px, 22px, 0px, 0) might become (5000px,

  1193    22000px, 0px), with <var>n</var> = 1000, but this value of <var>n</var>

  1194    would be too small for (0.1px, 0.05px, 0px, 0). This specification does

  1195    not define the value of <var>n</var> exactly. Conceptually,

  1196    (<var>x</var>′, <var>y</var>′, <var>z</var>′) is <a

  1197    href="http://en.wikipedia.org/wiki/Plane_at_infinity">infinitely far</a>

  1198    in the direction (<var>x</var>, <var>y</var>, <var>z</var>).

  1200   <p> If <var>w</var> &lt; 0 for all four corners of the transformed box, the

  1201    box is not rendered.

  1203   <p> If <var>w</var> &lt; 0 for one to three corners of the transformed box,

  1204    the box must be replaced by a polygon that has any parts with <var>w</var>

  1205    &lt; 0 cut out. This will in general be a polygon with three to five

  1206    vertices, of which exactly two will have <var>w</var> = 0 and the rest

  1207    <var>w</var> &gt; 0. These vertices are then transformed to

  1208    three-dimensional points using the rules just stated. Conceptually, a

  1209    point with <var>w</var> &lt; 0 is "behind" the viewer, so should not be

  1210    visible.

  1212   <div class=example>

  1213    <pre>&lt;style&gt;

  1214 .transformed {

  1215     height: 100px;

  1216     width: 100px;

  1217     background: lime;

  1218     transform: perspective(50px) translateZ(100px);

  1219 }

  1220 &lt;/style&gt;</pre>

  1222    <p> All of the box's corners have <var>z</var>-coordinates greater than

  1223     the perspective. This means that the box is behind the viewer and will

  1224     not display. Mathematically, the point (<var>x</var>, <var>y</var>) first

  1225     becomes (<var>x</var>, <var>y</var>, 0, 1), then is translated to

  1226     (<var>x</var>, <var>y</var>, 100, 1), and then applying the perspective

  1227     results in (<var>x</var>, <var>y</var>, 100, −1). The

  1228     <var>w</var>-coordinate is negative, so it does not display. An

  1229     implementation that doesn't handle the <var>w</var> &lt; 0 case

  1230     separately might incorrectly display this point as (−<var>x</var>,

  1231     −<var>y</var>, −100), dividing by −1 and mirroring the box.

  1232   </div>

  1234   <div class=example>

  1235    <pre>&lt;style&gt;

  1236 .transformed {

  1237     height: 100px;

  1238     width: 100px;

  1239     background: radial-gradient(yellow, blue);

  1240     transform: perspective(50px) translateZ(50px);

  1241 }

  1242 &lt;/style&gt;</pre>

  1244    <p> Here, the box is translated upward so that it sits at the same place

  1245     the viewer is looking from. This is like bringing the box closer and

  1246     closer to one's eye until it fills the entire field of vision. Since the

  1247     default transform-origin is at the center of the box, which is yellow,

  1248     the screen will be filled with yellow.

  1250    <p> Mathematically, the point (<var>x</var>, <var>y</var>) first becomes

  1251     (<var>x</var>, <var>y</var>, 0, 1), then is translated to (<var>x</var>,

  1252     <var>y</var>, 50, 1), then becomes (<var>x</var>, <var>y</var>, 50, 0)

  1253     after applying perspective. Relative to the transform-origin at the

  1254     center, the upper-left corner was (−50, −50), so it becomes (−50,

  1255     −50, 50, 0). This is transformed to something very far to the upper

  1256     left, such as (−5000, −5000, 5000). Likewise the other corners are

  1257     sent very far away. The radial gradient is stretched over the whole box,

  1258     now enormous, so the part that's visible without scrolling should be the

  1259     color of the middle pixel: yellow. However, since the box is not actually

  1260     infinite, the user can still scroll to the edges to see the blue parts.

  1261   </div>

  1263   <div class=example>

  1264    <pre>&lt;style&gt;

  1265 .transformed {

  1266     height: 50px;

  1267     width: 50px;

  1268     background: lime;

  1269     border: 25px solid blue;

  1270     transform-origin: left;

  1271     transform: perspective(50px) rotateY(-45deg);

  1272 }

  1273 &lt;/style&gt;</pre>

  1275    <p> The box will be rotated toward the viewer, with the left edge staying

  1276     fixed while the right edge swings closer. The right edge will be at about

  1277     <var>z</var> = 70.7px, which is closer than the perspective of 50px.

  1278     Therefore, the rightmost edge will vanish ("behind" the viewer), and the

  1279     visible part will stretch out infinitely far to the right.

  1281    <p> Mathematically, the top right vertex of the box was originally (100,

  1282     −50), relative to the transform-origin. It is first expanded to (100,

  1283     −50, 0, 1). After applying the transform specified, this will get

  1284     mapped to about (70.71, −50, 70.71, −0.4142). This has <var>w</var> =

  1285     −0.4142 &lt; 0, so we need to slice away the part of the box with

  1286     <var>w</var> &lt; 0. This results in the new top-right vertex being (50,

  1287     −50, 50, 0). This is then mapped to some faraway point in the same

  1288     direction, such as (5000, −5000, 5000), which is up and to the right

  1289     from the transform-origin. Something similar is done to the lower right

  1290     corner, which gets mapped far down and to the right. The resulting box

  1291     stretches far past the edge of the screen.

  1293    <p> Again, the rendered box is still finite, so the user can scroll to see

  1294     the whole thing if he or she chooses. However, the right part has been

  1295     chopped off. No matter how far the user scrolls, the rightmost 30px or so

  1296     of the original box will not be visible. The blue border was only 25px

  1297     wide, so it will be visible on the left, top, and bottom, but not the

  1298     right.

  1300    <p> The same basic procedure would apply if one or three vertices had

  1301     <var>w</var> &lt; 0. However, in that case the result of truncating the

  1302     <var>w</var> &lt; 0 part would be a triangle or pentagon instead of a

  1303     quadrilateral.

  1304   </div>

  1305   <!-- ======================================================================================================= -->

  1307   <h2 id=transform-property><span class=secno>7. </span> The ‘<a

  1308    href="#effects"><code class=property>transform</code></a>’ Property</h2>

  1310   <p> A transformation is applied to the coordinate system an element renders

  1311    in through the ‘<a href="#effects"><code

  1312    class=property>transform</code></a>’ property. This property contains a

  1313    list of <a href="#transform-functions">transform functions</a>. The final

  1314    transformation value for a coordinate system is obtained by converting

  1315    each function in the list to its corresponding matrix like defined in <a

  1316    href="#mathematical-description">Mathematical Description of Transform

  1317    Functions</a>, then multiplying the matrices.

  1319   <table class=propdef>

  1320    <tbody>

  1321     <tr>

  1322      <td> <em>Name:</em>

  1324      <td> <dfn id=effects>transform</dfn>

  1326     <tr>

  1327      <td> <em>Value:</em>

  1329      <td> none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*

  1331     <tr>

  1332      <td> <em>Initial:</em>

  1334      <td> none

  1336     <tr>

  1337      <td> <em>Applies to:</em>

  1339      <td> <a href="#TermTransformableElement">transformable elements</a>

  1341     <tr>

  1342      <td> <em>Inherited:</em>

  1344      <td> no

  1346     <tr>

  1347      <td> <em>Percentages:</em>

  1349      <td> refer to the size of <a href="#bounding-box"><var>bounding

  1350       box</var></a>

  1352     <tr>

  1353      <td> <em>Media:</em>

  1355      <td> visual

  1357     <tr>

  1358      <td> <em>Computed value:</em>

  1360      <td> As specified, but with relative lengths converted into absolute

  1361       lengths.

  1363     <tr>

  1364      <td> <em>Animatable:</em>

  1366      <td> as <a href="#animation">transform</a>

  1367   </table>

  1369   <p> Any value other than ‘<code class=css>none</code>’ for the

  1370    transform results in the creation of both a stacking context and a

  1371    containing block. The object acts as a containing block for fixed

  1372    positioned descendants.</p>

  1373   <!-- ======================================================================================================= -->

  1375   <h2 id=transform-origin-property><span class=secno>8. </span> The ‘<a

  1376    href="#transform-origin"><code

  1377    class=property>transform-origin</code></a>’ Property</h2>

  1379   <table class=propdef>

  1380    <tbody>

  1381     <tr>

  1382      <td> <em>Name:</em>

  1384      <td> <dfn id=transform-origin>transform-origin</dfn>

  1386     <tr>

  1387      <td> <em>Value:</em>

  1389      <td> [ &lt;percentage> | &lt;length> | left | center | right | top |

  1390       bottom]<br>

  1391       |<br>

  1392       [<br>

  1393         [ &lt;percentage> | &lt;length&gt; | left | center | right ]<br>

  1394         &amp;&amp;<br>

  1395         [ &lt;percentage> | &lt;length&gt; | top | center | bottom ]<br>

  1396       ] &lt;length&gt;?<br>

  1398     <tr>

  1399      <td> <em>Initial:</em>

  1401      <td> 50% 50%

  1403     <tr>

  1404      <td> <em>Applies to:</em>

  1406      <td> <a href="#TermTransformableElement">transformable elements</a>

  1408     <tr>

  1409      <td> <em>Inherited:</em>

  1411      <td> no

  1413     <tr>

  1414      <td> <em>Percentages:</em>

  1416      <td> refer to the size of <a href="#bounding-box"><var>bounding

  1417       box</var></a>

  1419     <tr>

  1420      <td> <em>Media:</em>

  1422      <td> visual

  1424     <tr>

  1425      <td> <em>Computed value:</em>

  1427      <td> For &lt;length&gt; the absolute value, otherwise a percentage

  1429     <tr>

  1430      <td> <em>Animatable:</em>

  1432      <td> as <a

  1433       href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple

  1434       list</a> of <a

  1435       href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,

  1436       percentage, or calc</a>

  1437   </table>

  1439   <p> The default value for SVG elements without associated CSS layout box is

  1440    ‘<code class=css>0 0</code>’.

  1442   <p> The values of the ‘<a href="#effects"><code

  1443    class=property>transform</code></a>’ and ‘<a

  1444    href="#transform-origin"><code

  1445    class=property>transform-origin</code></a>’ properties are used to

  1446    compute the <a class=term href="#transformation-matrix">transformation

  1447    matrix</a>, as described above.

  1449   <p> If only one value is specified, the second value is assumed to be

  1450    ‘<code class=css>center</code>’. If one or two values are specified,

  1451    the third value is assumed to be ‘<code class=css>0px</code>’.

  1453   <p> If two or more values are defined and either no value is a keyword, or

  1454    the only used keyword is ‘<code class=css>center</code>’, then the

  1455    first value represents the horizontal position (or offset) and the second

  1456    represents the vertical position (or offset). A third value always

  1457    represents the Z position (or offset) and must be of type

  1458    <var>&lt;length&gt;</var>.

  1460   <dl>

  1461    <dt><var>&lt;percentage&gt;</var>

  1463    <dd>

  1464     <p>A percentage for the horizontal offset is relative to the width of the

  1465      <a href="#bounding-box"><var>bounding box</var></a>. A percentage for

  1466      the vertical offset is relative to height of the <a

  1467      href="#bounding-box"><var>bounding box</var></a>. The value for the

  1468      horizontal and vertical offset represent an offset from the top left

  1469      corner of the <a href="#bounding-box"><var>bounding box</var></a>.

  1471    <dt><var>&lt;length&gt;</var>

  1473    <dd>

  1474     <p>A length value gives a fixed length as the offset. The value for the

  1475      horizontal and vertical offset represent an offset from the top left

  1476      corner of the <a href="#bounding-box"><var>bounding box</var></a>.

  1478     <p>For SVG elements without an associated CSS layout box the horizontal

  1479      and vertical offset represent an offset from the point of origin of the

  1480      element's local coordinate space.

  1482    <dt><dfn id=top title="''top''!!'transform-origin' value">‘<code

  1483     class=css>top</code>’</dfn>

  1485    <dd>Computes to ‘<code class=css>0%</code>’ for the vertical position.

  1487    <dt><dfn id=right title="''right''!!'transform-origin' value">‘<code

  1488     class=css>right</code>’</dfn>

  1490    <dd>Computes to ‘<code class=css>100%</code>’ for the horizontal

  1491     position.

  1493    <dt><dfn id=bottom title="''bottom''!!'transform-origin' value">‘<code

  1494     class=css>bottom</code>’</dfn>

  1496    <dd>Computes to ‘<code class=css>100%</code>’ for the vertical

  1497     position.

  1499    <dt><dfn id=left title="''left''!!'transform-origin' value">‘<code

  1500     class=css>left</code>’</dfn>

  1502    <dd>Computes to ‘<code class=css>0%</code>’ for the horizontal

  1503     position.

  1505    <dt><dfn id=center title="''center''!!'transform-origin' value">‘<code

  1506     class=css>center</code>’</dfn>

  1508    <dd>Computes to ‘<code class=css>50%</code>’ (‘<code class=css>left

  1509     50%</code>’) for the horizontal position if the horizontal position is

  1510     not otherwise specified, or ‘<code class=css>50%</code>’ (‘<code

  1511     class=css>top 50%</code>’) for the vertical position if it is.

  1512   </dl>

  1514   <p> The <a href="http://www.w3.org/TR/cssom/#resolved-value">resolved

  1515    value</a> of ‘<a href="#transform-origin"><code

  1516    class=property>transform-origin</code></a>’ is the <a

  1517    href="http://www.w3.org/TR/CSS21/cascade.html#used-value">used value</a>

  1518    (i.e., percentages are resolved to absolute lengths).</p>

  1519   <!-- ======================================================================================================= -->

  1521   <h2 id=transform-style-property><span class=secno>9. </span> The ‘<a

  1522    href="#transform-style"><code class=property>transform-style</code></a>’

  1523    Property</h2>

  1525   <table class=propdef>

  1526    <tbody>

  1527     <tr>

  1528      <td> <em>Name:</em>

  1530      <td> <dfn id=transform-style>transform-style</dfn>

  1532     <tr>

  1533      <td> <em>Value:</em>

  1535      <td> flat | preserve-3d

  1537     <tr>

  1538      <td> <em>Initial:</em>

  1540      <td> flat

  1542     <tr>

  1543      <td> <em>Applies to:</em>

  1545      <td> <a href="#TermTransformableElement">transformable elements</a>

  1547     <tr>

  1548      <td> <em>Inherited:</em>

  1550      <td> no

  1552     <tr>

  1553      <td> <em>Percentages:</em>

  1555      <td> N/A

  1557     <tr>

  1558      <td> <em>Media:</em>

  1560      <td> visual

  1562     <tr>

  1563      <td> <em>Computed value:</em>

  1565      <td> Same as specified value.

  1567     <tr>

  1568      <td> <em>Animatable:</em>

  1570      <td> no

  1571   </table>

  1573   <p> A value of ‘<code class=css>preserve-3d</code>’ for ‘<a

  1574    href="#transform-style"><code class=property>transform-style</code></a>’

  1575    establishes a stacking context.

  1577   <p> The following CSS property values require the user agent to create a

  1578    flattened representation of the descendant elements before they can be

  1579    applied, and therefore override the behavior of ‘<code

  1580    class=css>transform-style: preserve-3d</code>’:

  1582   <ul>

  1583    <li>‘<code class=property>overflow</code>’: any value other than

  1584     ‘<code class=css>visible</code>’.

  1586    <li>‘<code class=property>opacity</code>’: any value other than

  1587     ‘<code class=css>1</code>’.

  1589    <li>‘<code class=property>filter</code>’: any value other than

  1590     ‘<code class=css>none</code>’.

  1591   </ul>

  1593   <p> The computed value of ‘<a href="#transform-style"><code

  1594    class=property>transform-style</code></a>’ is not affected.

  1596   <p> The values of the ‘<a href="#effects"><code

  1597    class=property>transform</code></a>’ and ‘<a

  1598    href="#transform-origin"><code

  1599    class=property>transform-origin</code></a>’ properties are used to

  1600    compute the <a class=term href="#transformation-matrix">transformation

  1601    matrix</a>, as described above.</p>

  1602   <!-- ======================================================================================================= -->

  1604   <h2 id=perspective-property><span class=secno>10. </span> The ‘<a

  1605    href="#perspective"><code class=property>perspective</code></a>’

  1606    Property</h2>

  1608   <table class=propdef>

  1609    <tbody>

  1610     <tr>

  1611      <td> <em>Name:</em>

  1613      <td> <dfn id=perspective>perspective</dfn>

  1615     <tr>

  1616      <td> <em>Value:</em>

  1618      <td> none | &lt;length&gt;

  1620     <tr>

  1621      <td> <em>Initial:</em>

  1623      <td> none

  1625     <tr>

  1626      <td> <em>Applies to:</em>

  1628      <td> <a href="#TermTransformableElement">transformable elements</a>

  1630     <tr>

  1631      <td> <em>Inherited:</em>

  1633      <td> no

  1635     <tr>

  1636      <td> <em>Percentages:</em>

  1638      <td> N/A

  1640     <tr>

  1641      <td> <em>Media:</em>

  1643      <td> visual

  1645     <tr>

  1646      <td> <em>Computed value:</em>

  1648      <td> Absolute length or "none".

  1650     <tr>

  1651      <td> <em>Animatable:</em>

  1653      <td> as <a

  1654       href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>

  1655   </table>

  1657   <p> If the value is ‘<code class=css>none</code>’, no perspective

  1658    transform is applied. Lengths must be positive.

  1660   <p> The use of this property with any value other than ‘<code

  1661    class=css>none</code>’ establishes a stacking context. It also

  1662    establishes a containing block (somewhat similar to ‘<code

  1663    class=css>position: relative</code>’), just like the ‘<a

  1664    href="#effects"><code class=property>transform</code></a>’ property

  1665    does.

  1667   <p> The values of the ‘<a href="#perspective"><code

  1668    class=property>perspective</code></a>’ and ‘<a

  1669    href="#perspective-origin"><code

  1670    class=property>perspective-origin</code></a>’ properties are used to

  1671    compute the <a class=term href="#perspective-matrix">perspective

  1672    matrix</a>, as described above.</p>

  1673   <!-- ======================================================================================================= -->

  1675   <h2 id=perspective-origin-property><span class=secno>11. </span> The ‘<a

  1676    href="#perspective-origin"><code

  1677    class=property>perspective-origin</code></a>’ Property</h2>

  1679   <p> The ‘<a href="#perspective-origin"><code

  1680    class=property>perspective-origin</code></a>’ property establishes the

  1681    origin for the <a href="#perspective"><em>perspective</em></a> property.

  1682    It effectively sets the X and Y position at which the viewer appears to be

  1683    looking at the children of the element.

  1685   <table class=propdef>

  1686    <tbody>

  1687     <tr>

  1688      <td> <em>Name:</em>

  1690      <td> <dfn id=perspective-origin>perspective-origin</dfn>

  1692     <tr>

  1693      <td> <em>Value:</em>

  1695      <td> [ &lt;percentage> | &lt;length> | left | center | right | top |

  1696       bottom]<br>

  1697       |<br>

  1698       [<br>

  1699         [ &lt;percentage> | &lt;length&gt; | left | center | right ]<br>

  1700         &amp;&amp;<br>

  1701         [ &lt;percentage> | &lt;length&gt; | top | center | bottom ]<br>

  1702       ]<br>

  1704     <tr>

  1705      <td> <em>Initial:</em>

  1707      <td> 50% 50%

  1709     <tr>

  1710      <td> <em>Applies to:</em>

  1712      <td> <a href="#TermTransformableElement">transformable elements</a>

  1714     <tr>

  1715      <td> <em>Inherited:</em>

  1717      <td> no

  1719     <tr>

  1720      <td> <em>Percentages:</em>

  1722      <td> refer to the size of the <a href="#bounding-box"><var>bounding

  1723       box</var></a>

  1725     <tr>

  1726      <td> <em>Media:</em>

  1728      <td> visual

  1730     <tr>

  1731      <td> <em>Computed value:</em>

  1733      <td> For &lt;length&gt; the absolute value, otherwise a percentage.

  1735     <tr>

  1736      <td> <em>Animatable:</em>

  1738      <td> as <a

  1739       href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple

  1740       list</a> of <a

  1741       href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,

  1742       percentage, or calc</a>

  1743   </table>

  1745   <p> The values of the ‘<a href="#perspective"><code

  1746    class=property>perspective</code></a>’ and ‘<a

  1747    href="#perspective-origin"><code

  1748    class=property>perspective-origin</code></a>’ properties are used to

  1749    compute the <a class=term href="#perspective-matrix">perspective

  1750    matrix</a>, as described above.

  1752   <p> If only one value is specified, the second value is assumed to be

  1753    ‘<code class=css>center</code>’.

  1755   <p> If at least one of the two values is not a keyword, then the first

  1756    value represents the horizontal position (or offset) and the second

  1757    represents the vertical position (or offset).

  1759   <p> The values for ‘<a href="#perspective-origin"><code

  1760    class=property>perspective-origin</code></a>’ represent an offset of the

  1761    perspective origin from the top left corner of the <a

  1762    href="#bounding-box"><var>bounding box</var></a>.

  1764   <dl>

  1765    <dt><var>&lt;percentage&gt;</var>

  1767    <dd>

  1768     <p>A percentage for the horizontal perspctive offset is relative to the

  1769      width of the <a href="#bounding-box"><var>bounding box</var></a>. A

  1770      percentage for the vertical offset is relative to height of the <a

  1771      href="#bounding-box"><var>bounding box</var></a>. The value for the

  1772      horizontal and vertical offset represent an offset from the top left

  1773      corner of the <a href="#bounding-box"><var>bounding box</var></a>.

  1775    <dt><var>&lt;length&gt;</var>

  1777    <dd>

  1778     <p>A length value gives a fixed length as the offset. The value for the

  1779      horizontal and vertical offset represent an offset from the top left

  1780      corner of the <a href="#bounding-box"><var>bounding box</var></a>.

  1782    <dt><dfn id=top0 title="''top''!!'perspective-origin' value">‘<code

  1783     class=css>top</code>’</dfn>

  1785    <dd>Computes to ‘<code class=css>0%</code>’ for the vertical position.

  1787    <dt><dfn id=right0 title="''right''!!'perspective-origin' value">‘<code

  1788     class=css>right</code>’</dfn>

  1790    <dd>Computes to ‘<code class=css>100%</code>’ for the horizontal

  1791     position.

  1793    <dt><dfn id=bottom0

  1794     title="''bottom''!!'perspective-origin' value">‘<code

  1795     class=css>bottom</code>’</dfn>

  1797    <dd>Computes to ‘<code class=css>100%</code>’ for the vertical

  1798     position.

  1800    <dt><dfn id=left0 title="''left''!!'perspective-origin' value">‘<code

  1801     class=css>left</code>’</dfn>

  1803    <dd>Computes to ‘<code class=css>0%</code>’ for the horizontal

  1804     position.

  1806    <dt><dfn id=center0

  1807     title="''center''!!'perspective-origin' value">‘<code

  1808     class=css>center</code>’</dfn>

  1810    <dd>Computes to ‘<code class=css>50%</code>’ (‘<code class=css>left

  1811     50%</code>’) for the horizontal position if the horizontal position is

  1812     not otherwise specified, or ‘<code class=css>50%</code>’ (‘<code

  1813     class=css>top 50%</code>’) for the vertical position if it is.

  1814   </dl>

  1816   <p> The <a href="http://www.w3.org/TR/cssom/#resolved-value">resolved

  1817    value</a> of ‘<a href="#perspective-origin"><code

  1818    class=property>perspective-origin</code></a>’ is the <a

  1819    href="http://www.w3.org/TR/CSS21/cascade.html#used-value">used value</a>

  1820    (i.e., percentages are resolved to absolute lengths).</p>

  1821   <!-- ======================================================================================================= -->

  1823   <h2 id=backface-visibility-property><span class=secno>12. </span> The ‘<a

  1824    href="#backface-visibility"><code

  1825    class=property>backface-visibility</code></a>’ Property</h2>

  1827   <p> The ‘<a href="#backface-visibility"><code

  1828    class=property>backface-visibility</code></a>’ property determines

  1829    whether or not the "back" side of a transformed element is visible when

  1830    facing the viewer. With an identity transform, the front side of an

  1831    element faces the viewer. Applying a rotation about Y of 180 degrees (for

  1832    instance) would cause the back side of the element to face the viewer.

  1834   <p class=note> Note that this property is useful when you place two

  1835    elements back-to-back, as you would to create a playing card. Without this

  1836    property, the front and back elements could switch places at times during

  1837    an animation to flip the card. Another example is creating a box out of 6

  1838    elements, but where you want to see the inside faces of the box. This is

  1839    useful when creating the backdrop for a 3 dimensional stage.

  1841   <table class=propdef>

  1842    <tbody>

  1843     <tr>

  1844      <td> <em>Name:</em>

  1846      <td> <dfn id=backface-visibility>backface-visibility</dfn>

  1848     <tr>

  1849      <td> <em>Value:</em>

  1851      <td> visible | hidden

  1853     <tr>

  1854      <td> <em>Initial:</em>

  1856      <td> visible

  1858     <tr>

  1859      <td> <em>Applies to:</em>

  1861      <td> <a href="#TermTransformableElement">transformable elements</a>

  1863     <tr>

  1864      <td> <em>Inherited:</em>

  1866      <td> no

  1868     <tr>

  1869      <td> <em>Percentages:</em>

  1871      <td> N/A

  1873     <tr>

  1874      <td> <em>Media:</em>

  1876      <td> visual

  1878     <tr>

  1879      <td> <em>Computed value:</em>

  1881      <td> Same as specified value.

  1883     <tr>

  1884      <td> <em>Animatable:</em>

  1886      <td> no

  1887   </table>

  1889   <p> The visibility of an element with ‘<code

  1890    class=css>backface-visibility: hidden</code>’ is determined as follows:

  1892   <ol>

  1893    <li> For an element in a <a class=term href="#d-rendering-context">3D

  1894     rendering context</a>, compute its <a class=term

  1895     href="#accumulated-3d-transformation-matrix"> accumulated 3D

  1896     transformation matrix</a>. For an element not in a <a class=term

  1897     href="#d-rendering-context">3D rendering context</a>, compute its <a

  1898     class=term href="#transformation-matrix">transformation matrix</a>.

  1900    <li> If the component of the matrix in row 3, column 3 is negative, then

  1901     the element should be hidden. Otherwise it is visible.

  1902   </ol>

  1904   <p class=note> The reasoning for this definition is as follows. Assume

  1905    elements are rectangles in the <var>x</var>–<var>y</var> plane with

  1906    infinitesimal thickness. The front of the untransformed element has

  1907    coordinates like (<var>x</var>, <var>y</var>, <var>ε</var>), and the back

  1908    is (<var>x</var>, <var>y</var>, −<var>ε</var>), for some very small

  1909    <var>ε</var>. We want to know if after the transformation, the front of

  1910    the element is closer to the viewer than the back (higher

  1911    <var>z</var>-value) or further away. The <var>z</var>-coordinate of the

  1912    front will be <var>M</var><sub>13</sub><var>x</var> +

  1913    <var>M</var><sub>23</sub><var>y</var> +

  1914    <var>M</var><sub>33</sub><var>ε</var> + <var>M</var><sub>43</sub>, before

  1915    accounting for perspective, and the back will be

  1916    <var>M</var><sub>13</sub><var>x</var> +

  1917    <var>M</var><sub>23</sub><var>y</var> −

  1918    <var>M</var><sub>33</sub><var>ε</var> + <var>M</var><sub>43</sub>. The

  1919    first quantity is greater than the second if and only if

  1920    <var>M</var><sub>33</sub> > 0. (If it equals zero, the front and back are

  1921    equally close to the viewer. This probably means something like a

  1922    90-degree rotation, which makes the element invisible anyway, so we don't

  1923    really care whether it vanishes.)</p>

  1924   <!-- ======================================================================================================= -->

  1926   <h2 id=svg-transform><span class=secno>13. </span> The SVG ‘<a

  1927    href="#effects"><code class=property>transform</code></a>’ Attribute</h2>

  1929   <p> The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1

  1930    specification</a> did not specify the attributes ‘<a

  1931    href="#effects"><code class=property>transform</code></a>’, ‘<code

  1932    class=property>gradientTransform</code>’ or ‘<code

  1933    class=property>patternTransform</code>’ as <a

  1934    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes"><em>presentation

  1935    attributes</em></a>. In order to improve the integration of SVG and HTML,

  1936    this specification makes these SVG attributes ‘<code

  1937    class=css>presentation attributes</code>’ and makes the ‘<a

  1938    href="#effects"><code class=property>transform</code></a>’ property one

  1939    that applies to <a class=term href="#transformable-element">transformable

  1940    elements</a> in the SVG namespace.

  1942   <p> This specification will also introduce the new presentation attributes

  1943    ‘<a href="#transform-origin"><code

  1944    class=property>transform-origin</code></a>’, ‘<a

  1945    href="#perspective"><code class=property>perspective</code></a>’, ‘<a

  1946    href="#perspective-origin"><code

  1947    class=property>perspective-origin</code></a>’, ‘<a

  1948    href="#transform-style"><code class=property>transform-style</code></a>’

  1949    and ‘<a href="#backface-visibility"><code

  1950    class=property>backface-visibility</code></a>’.

  1952   <p> Values on new introduced presentation attributes get parsed following

  1953    the syntax rules on <a href="#svg-data-types">SVG Data Types</a> <a

  1954    href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.

  1956   <h3 id=transform-attribute-specificity><span class=secno>13.1. </span> SVG

  1957    ‘<a href="#effects"><code class=property>transform</code></a>’

  1958    attribute specificity</h3>

  1960   <p> Since the previously named SVG attributes become presentation

  1961    attributes, their participation in the CSS cascade is determined by the

  1962    specificity of presentation attributes, as <a

  1963    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">explained</a>

  1964    in the SVG specification.

  1966   <div class=example>

  1967    <p> This example shows the combination of the ‘<a href="#effects"><code

  1968     class=property>transform</code></a>’ style property and the ‘<a

  1969     href="#effects"><code class=property>transform</code></a>’ presentation

  1970     attribute.

  1972    <pre>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;

  1973     &lt;style&gt;

  1974     .container {

  1975         transform: translate(100px, 100px);

  1976     }

  1977     &lt;/style&gt;

  1979     &lt;g class="container" transform="translate(200 200)"&gt;

  1980         &lt;rect width="100" height="100" fill="blue" /&gt;

  1981     &lt;/g&gt;

  1982 &lt;/svg&gt;</pre>

  1984    <div class=figure> <img alt="Translated SVG container element." height=240

  1985     src="examples/svg-translate1.svg" width=470></div>

  1987    <p> Because of the participation to the CSS cascade, the ‘<a

  1988     href="#effects"><code class=property>transform</code></a>’ style

  1989     property overrides the ‘<a href="#effects"><code

  1990     class=property>transform</code></a>’ presentation attribute. Therefore

  1991     the container gets translated by ‘<code class=css>100px</code>’ in

  1992     both the horizontal and the vertical directions, instead of ‘<code

  1993     class=css>200px</code>’.

  1994   </div>

  1996   <h3 id=svg-syntax><span class=secno>13.2. </span> Syntax of the SVG ‘<a

  1997    href="#effects"><code class=property>transform</code></a>’ attribute</h3>

  1999   <p> To provide backwards compatibility, the syntax of the ‘<a

  2000    href="#effects"><code class=property>transform</code></a>’ presentation

  2001    attribute differs from the syntax of the ‘<a href="#effects"><code

  2002    class=property>transform</code></a>’ style property as shown in the

  2003    example above. However, the syntax used for the ‘<a

  2004    href="#effects"><code class=property>transform</code></a>’ style

  2005    property can be used for a ‘<a href="#effects"><code

  2006    class=property>transform</code></a>’ presentation attribute value.

  2007    Authors are advised to follow the rules of <a

  2008    href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values

  2009    and Units Module</a>. Therefore an author should write ‘<code

  2010    class=css>transform="translate(200px, 200px)"</code>’ instead of

  2011    ‘<code class=css>transform="translate (200 200)"</code>’ because the

  2012    second example with the spaces before the ‘<code class=css>(</code>’,

  2013    the missing comma between the arguments and the values without the

  2014    explicit unit notation would be valid for the attribute only.

  2016   <h4 id=svg-transform-list><span class=secno>13.2.1. </span> Transform List</h4>

  2018   <p> The value for the ‘<a href="#effects"><code

  2019    class=property>transform</code></a>’ attribute consists of a transform

  2020    list with zero or more transform functions using <a

  2021    href="#svg-functional-notation">functional notation</a>. If the transform

  2022    list consists of more than one transform function, these functions are

  2023    separated by optional whitespace, an optional comma (‘<code

  2024    class=css>,</code>’) and optional whitespace. The transform list can

  2025    have optional whitespace characters before and after the list.

  2027   <h4 id=svg-functional-notation><span class=secno>13.2.2. </span> Functional

  2028    Notation</h4>

  2030   <p> The syntax starts with the name of the function followed by optional

  2031    whitespace characters followed by a left parenthesis followed by optional

  2032    whitespace followed by the argument(s) to the notation followed by

  2033    optional whitespace followed by a right parenthesis. If a function takes

  2034    more than one argument, the arguments are either separated by a comma

  2035    (‘<code class=css>,</code>’) with optional whitespace characters

  2036    before and after the comma, or by one or more whitespace characters.

  2038   <h4 id=svg-data-types><span class=secno>13.2.3. </span> SVG Data Types</h4>

  2040   <p> Arguments on all new introduced presentation attributes consist of data

  2041    types in the sense of <a

  2042    href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values

  2043    and Units Module</a>. The definitions of data types in CSS Values and

  2044    Units Module are enhanced as follows:

  2046   <h5 id=svg-transform-value><span class=secno>13.2.3.1. </span> The

  2047    <var>&lt;translation-value&gt;</var> and <var>&lt;length&gt;</var> type</h5>

  2049   <p> A translation-value or length can be a <var>&lt;number&gt;</var>

  2050    without an unit identifier. In this case the <a

  2051    href="#svg-number"><var>number</var></a> gets interpreted as "user unit".

  2052    A user unit in the the <a

  2053    href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem">initial

  2054    coordinate system</a> is equivalent to the parent environment's notion of

  2055    a pixel unit.

  2057   <h5 id=svg-angle><span class=secno>13.2.3.2. </span> The

  2058    <var>&lt;angle&gt;</var> type</h5>

  2060   <p> An angle can be a <var>&lt;number&gt;</var> without an unit identifier.

  2061    In this case the <a href="#svg-number"><i>number</i></a> gets interpreted

  2062    as a value in degrees.

  2064   <h5 id=svg-number><span class=secno>13.2.3.3. </span> The

  2065    <var>&lt;number&gt;</var> type</h5>

  2067   <p> SVG supports scientific notations for numbers. Therefore a

  2068    <var>number</var> gets parsed like described in SVG <a

  2069    href="http://www.w3.org/TR/SVG/types.html#DataTypeNumber">Basic data

  2070    types</a> for SVG attributes.

  2072   <h3 id=svg-gradient-transform-pattern-transform><span class=secno>13.3.

  2073    </span> The SVG ‘<code class=property>gradientTransform</code>’ and

  2074    ‘<code class=property>patternTransform</code>’ attributes</h3>

  2076   <p> SVG specifies the attributes ‘<code

  2077    class=property>gradientTransform</code>’ and ‘<code

  2078    class=property>patternTransform</code>’. This specification makes both

  2079    attributes presentation attributes. Both attributes use the same <a

  2080    href="#svg-syntax">syntax</a> as the SVG ‘<a href="#effects"><code

  2081    class=property>transform</code></a>’ attribute. This specification does

  2082    not introduce corresponding CSS style properties. Both, the ‘<code

  2083    class=property>gradientTransform</code>’ and the ‘<code

  2084    class=property>patternTransform</code>’ attribute, are presentation

  2085    attributes for the ‘<a href="#effects"><code

  2086    class=property>transform</code></a>’ property.

  2088   <h3 id=svg-transform-functions><span class=secno>13.4. </span> SVG

  2089    transform functions</h3>

  2091   <p> For backwards compatibility with existing SVG content, this

  2092    specification supports all transform functions defined by <a

  2093    href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The

  2094    ‘<code class=property>transform</code>’ attribute</a> in <a

  2095    href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>. Therefore the

  2096    two-dimensional transform function ‘<code

  2097    class=css>rotate(&lt;angle&gt;)</code>’ is extended as follows:

  2099   <dl>

  2100    <dt id=rotate-three-function> <code class=css>rotate(&lt;angle&gt;[,

  2101     &lt;translation-value&gt;, &lt;translation-value&gt;])</code>

  2103    <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle

  2104     specified in the parameter about the origin of the element, as defined by

  2105     the ‘<a href="#transform-origin"><code

  2106     class=property>transform-origin</code></a>’ property. If the optional

  2107     translation values are specified, the transform origin is translated by

  2108     that amount (using the current transformation matrix) for the duration of

  2109     the rotate operation. For example ‘<code class=css>rotate(90deg, 100px,

  2110     100px)</code>’ would cause elements to appear rotated one-quarter of a

  2111     turn in the clockwise direction after a translation of the

  2112     transform-origin of 100 pixel in the horizontal and vertical directions.

  2113   </dl>

  2115   <p> User agents are just required to support the two optional arguments for

  2116    translation on elements in the SVG namespace.

  2118   <h3 id=svg-three-dimensional-functions><span class=secno>13.5. </span>SVG

  2119    and 3D transform functions</h3>

  2121   <p> This specification explicitly requires three-dimensional transform

  2122    functions to apply to the <a

  2123    href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement"><em>container

  2124    elements</em></a>: ‘<code class=property>a</code>’, ‘<code

  2125    class=property>g</code>’, ‘<code class=property>svg</code>’, all <a

  2126    href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement"><em>graphics

  2127    elements</em></a>, all <a

  2128    href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsReferencingElement"><em>graphics

  2129    referencing elements</em></a> and the SVG ‘<code class=css><a

  2130    href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement">foreignObject</a></code>’

  2131    element.

  2133   <p> Three-dimensional transform functions and the properties ‘<a

  2134    href="#perspective"><code class=property>perspective</code></a>’, ‘<a

  2135    href="#perspective-origin"><code

  2136    class=property>perspective-origin</code></a>’, ‘<a

  2137    href="#transform-style"><code class=property>transform-style</code></a>’

  2138    and ‘<a href="#backface-visibility"><code

  2139    class=property>backface-visibility</code></a>’ can not be used for the

  2140    elements: ‘<code class=property>clipPath</code>’, ‘<code

  2141    class=property>linearGradient</code>’, ‘<code

  2142    class=property>radialGradient</code>’ and ‘<code

  2143    class=property>pattern</code>’. If a transform list includes a

  2144    three-dimensional transform function, the complete transform list must be

  2145    ignored. The values of every previously named property must be ignored. <a

  2146    class=term href="#transformable-element">Transformable elements</a> that

  2147    are contained by one of these elements can have three-dimensional

  2148    transform functions. Before a ‘<code class=property>clipPath</code>’,

  2149    ‘<code class=property>mask</code>’ or ‘<code

  2150    class=property>pattern</code>’ element can get applied to a target

  2151    element, user agents must take the drawn results as static images in

  2152    analogue of "flattening" the elements and taking the rendered content as a

  2153    two-dimensional canvas.

  2155   <p> If the ‘<code class=property>vector-effect</code>’ property is set

  2156    to ‘<code class=css>non-scaling-stroke</code>’ and an object is within

  2157    a <a class=term href="#d-rendering-context">3D rendering context</a> the

  2158    property has no affect on stroking the object.

  2160   <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User

  2161    coordinate space</h3>

  2163   <p> For the ‘<code class=property>pattern</code>’, ‘<code

  2164    class=property>linearGradient</code>’, ‘<code

  2165    class=property>radialGradient</code>’ and ‘<code

  2166    class=property>clipPath</code>’ elements the ‘<a href="#effects"><code

  2167    class=property>transform</code></a>’, ‘<code

  2168    class=property>patternTransform</code>’, ‘<code

  2169    class=property>gradientTransform</code>’ presentation attributes

  2170    represents values in the current user coordinate system in place at the

  2171    time when these elements are referenced (i.e., the user coordinate system

  2172    for the element referencing the ‘<code class=property>pattern</code>’

  2173    element via a ‘<code class=property>fill</code>’ or ‘<code

  2174    class=property>stroke</code>’ property). Percentage values are relative

  2175    to the <a href="#bounding-box">bounding box</a> of the referencing

  2176    element.

  2178   <p> In particualar the ‘<code class=property>patternUnit</code>’,

  2179    ‘<code class=property>gradientUnit</code>’ and ‘<code

  2180    class=property>maskUnit</code>’ attributes don't affect the user

  2181    coordinate system used for transformations <a href="#SVG11"

  2182    rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.

  2184   <p> For all other <a class=term href="#transformable-element">transformable

  2185    elements</a> the ‘<a href="#effects"><code

  2186    class=property>transform</code></a>’ presentation attribute represents

  2187    values in the current user coordinate system of the parent. All percentage

  2188    values of the ‘<a href="#effects"><code

  2189    class=property>transform</code></a>’ presentation attribute are relative

  2190    to the element's <a href="#bounding-box"><var>bounding box</var></a>.

  2192   <div class=example>

  2193    <p> The ‘<a href="#transform-origin"><code

  2194     class=property>transform-origin</code></a>’ property on the pattern in

  2195     the following example specifies a ‘<code class=css>50%</code>’

  2196     translation of the origin in the horizontal and vertical dimension. The

  2197     ‘<a href="#effects"><code class=property>transform</code></a>’

  2198     property specifies a translation as well, but in absolute lengths.

  2200    <pre>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;

  2201     &lt;style&gt;

  2202     pattern {

  2203         transform: rotate(45deg);

  2204         transform-origin: 50% 50%;

  2205     }

  2206     &lt;/style&gt;

  2208     &lt;defs&gt;

  2209     &lt;pattern id="pattern-1"&gt;

  2210         &lt;rect id="rect1" width="100" height="100" fill="blue" /&gt;

  2211     &lt;/pattern&gt;

  2212     &lt;/defs&gt;

  2214     &lt;rect width="200" height="200" fill="url(#pattern-1)" /&gt;

  2215 &lt;/svg&gt;</pre>

  2217    <p> An SVG ‘<code class=property>pattern</code>’ element doesn't have

  2218     a bounding box. The <a href="#bounding-box"><var>bounding box</var></a>

  2219     of the referencing ‘<code class=property>rect</code>’ element is used

  2220     instead to solve the relative values of the ‘<a

  2221     href="#transform-origin"><code

  2222     class=property>transform-origin</code></a>’ property. Therefore the

  2223     point of origin will get translated by 100 pixels temporarily to rotate

  2224     the user space of the ‘<code class=property>pattern</code>’ elements

  2225     content.

  2226   </div>

  2228   <h3 id=transform-attribute-dom><span class=secno>13.7. </span> SVG DOM

  2229    interface for the ‘<a href="#effects"><code

  2230    class=property>transform</code></a>’ attribute</h3>

  2232   <p> The SVG specification defines the ‘<code class=css><a

  2233    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a></code>’

  2234    interface in the SVG DOM to provide access to the animated and the base

  2235    value of the SVG ‘<a href="#effects"><code

  2236    class=property>transform</code></a>’, ‘<code

  2237    class=property>gradientTransform</code>’ and ‘<code

  2238    class=property>patternTransform</code>’ attributes. To ensure backwards

  2239    compatibility, this API must still be supported by user agents.

  2241   <p> The ‘<a href="#effects"><code class=property>transform</code></a>’

  2242    property contributes to the CSS cascade. According to SVG 1.1 user agents

  2243    conceptually insert a <a

  2244    href="http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes">new

  2245    author style sheet</a> for presentation attributes, which is the first in

  2246    the author style sheet collection. ‘<code

  2247    class=property>baseVal</code>’ gives the author the possibility to

  2248    access and modify the values of the SVG ‘<a href="#effects"><code

  2249    class=property>transform</code></a>’ attribute. To provide the necessary

  2250    backwards compatibility to the SVG DOM, ‘<code

  2251    class=property>baseVal</code>’ must reflect the values of this author

  2252    style sheet. All modifications to SVG DOM objects of ‘<code

  2253    class=property>baseVal</code>’ must affect this author style sheet

  2254    immediately.

  2256   <p> ‘<code class=property>animVal</code>’ represents the computed style

  2257    of the ‘<a href="#effects"><code class=property>transform</code></a>’

  2258    property. Therefore it includes all applied <a

  2259    href="http://www.w3.org/TR/css3-transitions/">CSS3 Transitions</a>, <a

  2260    href="http://www.w3.org/TR/css3-animations/">CSS3 Animations</a> or <a

  2261    href="#svg-animation">SVG Animations</a> if any of those are underway. The

  2262    computed style and SVG DOM objects of ‘<code

  2263    class=property>animVal</code>’ can not be modified.

  2265   <p> The attribute ‘<code class=css><a

  2266    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__type">type</a></code>’

  2267    of ‘<code class=css><a

  2268    href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">SVGTransform</a></code>’

  2269    must return ‘<code class=css><a

  2270    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN">SVG_TRANSFORM_UNKNOWN</a></code>’

  2271    for <a href="#transform-functions">Transform Functions</a> or unit types

  2272    that are not supported by this interface. If a two-dimensional transform

  2273    function is not supported, the attribute ‘<code class=css><a

  2274    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__matrix">matrix</a></code>’

  2275    must return a 3x2 ‘<code class=css><a

  2276    href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a></code>’

  2277    with the corresponding values as described in the section <a

  2278    href="#mathematical-description">Mathematical Description of Transform

  2279    Functions</a>.

  2281   <h2 id=svg-animation><span class=secno>14. </span> SVG Animation</h2>

  2283   <h3 id=svg-animate-element><span class=secno>14.1. </span> The ‘<code

  2284    class=property>animate</code>’ and ‘<code class=property>set</code>’

  2285    element</h3>

  2287   <p> With this specification, the ‘<code class=property>animate</code>’

  2288    element and the ‘<code class=property>set</code>’ element can animate

  2289    the data type <var>&lt;transform-list&gt;</var>.

  2291   <p> The animation effect is post-multiplied to the underlying value for

  2292    additive ‘<code class=property>animate</code>’ animations (see below)

  2293    instead of added to the underlying value, due to the specific behavior of

  2294    <var>&lt;transform-list&gt;</var> animations.

  2296   <p> <var>From-to</var>, <var>from-by</var> and <var>by</var> animations are

  2297    defined in SMIL to be equivalent to a corresponding <var>values</var>

  2298    animation. However, <var>to</var> animations are a mixture of additive and

  2299    non-additive behavior <a href="#SMIL3"

  2300    rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a>.

  2302   <p> <var>To</var> animations on ‘<code class=property>animate</code>’

  2303    provide specific functionality to get a smooth change from the underlying

  2304    value to the ‘<code class=property>to</code>’ attribute value, which

  2305    conflicts mathematically with the requirement for additive transform

  2306    animations to be post-multiplied. As a consequence, the behavior of

  2307    <var>to</var> animations for ‘<code class=property>animate</code>’ is

  2308    undefined. Authors are suggested to use <var>from-to</var>,

  2309    <var>from-by</var>, <var>by</var> or <var>values</var> animations to

  2310    achieve any desired transform animation.

  2312   <p> The value ‘<code class=property>paced</code>’ is undefined for the

  2313    attribute ‘<code class=property>calcMode</code>’ on ‘<code

  2314    class=property>animate</code>’ for animations of the data type

  2315    <var>&lt;transform-list&gt;</var>. If specified, UAs may choose the value

  2316    ‘<code class=property>linear</code>’ instead. Future versions of this

  2317    specification may define how paced animations can be performed on

  2318    <var>&lt;transform-list&gt;</var>.

  2320   <p class=note>The following paragraphs extend <a

  2321    href="http://www.w3.org/TR/SVG/animate.html#complexDistances">Elements,

  2322    attributes and properties that can be animated</a> <a href="#SVG11"

  2323    rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.

  2325   <p> The introduce presentation attributes ‘<a href="#effects"><code

  2326    class=property>transform</code></a>’, ‘<a

  2327    href="#transform-origin"><code

  2328    class=property>transform-origin</code></a>’, ‘<a

  2329    href="#perspective"><code class=property>perspective</code></a>’, ‘<a

  2330    href="#perspective-origin"><code

  2331    class=property>perspective-origin</code></a>’, ‘<a

  2332    href="#transform-style"><code class=property>transform-style</code></a>’

  2333    and ‘<a href="#backface-visibility"><code

  2334    class=property>backface-visibility</code></a>’ are animatable. ‘<a

  2335    href="#transform-style"><code class=property>transform-style</code></a>’

  2336    and ‘<a href="#backface-visibility"><code

  2337    class=property>backface-visibility</code></a>’ are non-additive.

  2339   <p> With this specification the SVG basic data type

  2340    <var>&lt;transform-list&gt;</var> is equivalent to a list of

  2341    <var>&lt;transform-function&gt;</var>s. <var>&lt;transform-list&gt;</var>

  2342    is animatable and additive. The data type can be animated using the SVG

  2343    ‘<code class=css><a

  2344    href="http://www.w3.org/TR/SVG/animate.html#AnimateElement">animate</a></code>’

  2345    element and the SVG ‘<code class=css><a

  2346    href="http://www.w3.org/TR/SVG/animate.html#SetElement">set</a></code>’

  2347    element. SVG animations must run the same animation steps as described in

  2348    section <a href="#animation">Transitions and Animations between Transform

  2349    Values</a>.

  2351   <p> The set of animatable data types gets extended by

  2352    <em>&lt;translation-value&gt;</em>. The new data type is animatable and

  2353    additive.

  2355   <table class=data>

  2356    <caption>Animatable data types</caption>

  2358    <thead>

  2359     <tr>

  2360      <th>Data type

  2362      <th>Additive?

  2364      <th>‘<code class=property>animate</code>’

  2366      <th>‘<code class=property>set</code>’

  2368      <th>‘<code class=property>animateColor</code>’

  2370      <th>‘<code class=property>animateTransform</code>’

  2372      <th>Notes

  2374    <tbody>

  2375     <tr>

  2376      <th><var>&lt;transform-list&gt;</var>

  2378      <td>yes

  2380      <td>yes

  2382      <td>yes

  2384      <td>no

  2386      <td>yes

  2388      <td>Additive for ‘<code class=property>animateTransform</code>’

  2389       means that a transformation is post-multiplied to the base set of

  2390       transformations.

  2392     <tr>

  2393      <th><var>&lt;translation-value&gt;</var>

  2395      <td>yes

  2397      <td>yes

  2399      <td>yes

  2401      <td>no

  2403      <td>no

  2405      <td>

  2406   </table>

  2408   <h3 id=neutral-element><span class=secno>14.2. </span> Neutral element for

  2409    addition</h3>

  2411   <p> Some animations require a neutral element for addition. For transform

  2412    functions this is a scalar or a list of scalars of 0. Examples of neutral

  2413    elements for transform functions are ‘<code

  2414    class=css>translate(0)</code>’, ‘<code class=css>translate3d(0, 0,

  2415    0)</code>’, ‘<code class=css>translateX(0)</code>’, ‘<code

  2416    class=css>translateY(0)</code>’, ‘<code

  2417    class=css>translateZ(0)</code>’, ‘<code class=css>scale(0)</code>’,

  2418    ‘<code class=css>scaleX(0)</code>’, ‘<code

  2419    class=css>scaleY(0)</code>’, ‘<code class=css>scaleZ(0)</code>’,

  2420    ‘<code class=css>rotate(0)</code>’, ‘<code

  2421    class=css>rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>,

  2422    0)</code>’ (where <var>v</var> is a context dependent vector), ‘<code

  2423    class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,

  2424    ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,

  2425    0)</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code

  2426    class=css>skewY(0)</code>’, ‘<code class=css>matrix(0, 0, 0, 0, 0,

  2427    0)</code>’, ‘<code class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  2428    0, 0, 0, 0, 0)</code>’ and ‘<code class=css>perspective(0)</code>’.

  2430   <p class=note> Animations to or from the neutral element of additions

  2431    ‘<code class=css>matrix</code>’, ‘<code class=css>matrix3d</code>’

  2432    and ‘<a href="#perspective"><code class=css>perspective</code></a>’

  2433    fall back to discrete animations (See <a

  2434    href="#matrix-interpolation">Interpolation of Matrices</a>).

  2436   <div class=example>

  2437    <p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent

  2438     to the same animation with a values list with 2 values, the neutral

  2439     element for addition for the domain of the target attribute (denoted 0)

  2440     and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’. <a

  2441     href="#SMIL3" rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a>

  2443    <pre>

  2444 &lt;rect width="100" height="100"&gt;

  2445     &lt;animateTransform attributeName="transform" attributeType="XML"

  2446       type="scale" by="1" dur="5s" fill="freeze"/&gt;

  2447 &lt;/rect&gt;</pre>

  2449    <p> The neutral element for addition when performing a <var>by</var>

  2450     animation with ‘<code class=css>type="scale"</code>’ is the value 0.

  2451     Thus, performing the animation of the example above causes the rectangle

  2452     to be invisible at time 0s (since the animated transform list value is

  2453     ‘<code class=css>scale(0)</code>’), and be scaled back to its

  2454     original size at time 5s (since the animated transform list value is

  2455     ‘<code class=css>scale(1)</code>’).

  2456   </div>

  2458   <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG ‘<code

  2459    class=property>attributeName</code>’ attribute</h3>

  2461   <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>

  2462    defines the ‘<code class=css><a

  2463    href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">attributeName</a></code>’

  2464    attribute to specify the name of the target attribute. For the

  2465    presentation attributes ‘<code

  2466    class=property>gradientTransform</code>’ and ‘<code

  2467    class=property>patternTransform</code>’ it will also be possible to use

  2468    the value ‘<a href="#effects"><code

  2469    class=property>transform</code></a>’. The same ‘<a

  2470    href="#effects"><code class=property>transform</code></a>’ property will

  2471    get animated.

  2473   <div class=example>

  2474    <p> In this example the gradient transformation of the linear gradient

  2475     gets animated.

  2477    <pre>&lt;linearGradient gradientTransform="scale(2)"&gt;

  2478     &lt;animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"

  2479           dur="3s" additive="sum"/&gt;

  2480     &lt;animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"

  2481           dur="3s" additive="sum"/&gt;

  2482 &lt;/linearGradient&gt;</pre>

  2484    <p>The ‘<code class=property>linearGradient</code>’ element specifies

  2485     the ‘<code class=property>gradientTransform</code>’ presentation

  2486     attribute. The two ‘<code class=property>animate</code>’ elements

  2487     address the target attribute ‘<code

  2488     class=property>gradientTransform</code>’ and ‘<a

  2489     href="#effects"><code class=property>transform</code></a>’. Even so all

  2490     animations apply to the same gradient transformation by taking the value

  2491     of the ‘<code class=property>gradientTransform</code>’ presentation

  2492     attribute, applying the scaling of the first animation and applying the

  2493     translation of the second animation one after the other.

  2494   </div>

  2495   <!-- ======================================================================================================= -->

  2497   <h2 id=transform-functions><span class=secno>15. </span> The Transform

  2498    Functions</h2>

  2500   <p> The value of the ‘<a href="#effects"><code

  2501    class=property>transform</code></a>’ property is a list of

  2502    <var>&lt;transform-functions&gt;</var>. The set of allowed transform

  2503    functions is given below. For <var>&lt;transform-functions&gt;</var> the

  2504    type <var>&lt;translation-value&gt;</var> is defined as a

  2505    <var>&lt;length&gt;</var> or <var>&lt;percentage&gt;</var> value, and the

  2506    <var>&lt;angle&gt;</var> type is defined by <a

  2507    href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module.</a>

  2508    Wherever <var>&lt;angle&gt;</var> is used in this specification, a

  2509    <var>&lt;number&gt;</var> that is equal to zero is also allowed, which is

  2510    treated the same as an angle of zero degrees.

  2512   <h3 id=two-d-transform-functions><span class=secno>15.1. </span>2D

  2513    Transform Functions</h3>

  2515   <dl>

  2516    <dt id=matrix-function> <code class=css>matrix(&lt;number&gt;,

  2517     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,

  2518     &lt;number&gt;)</code>

  2520    <dd> specifies a 2D transformation in the form of a <a

  2521     href="#MatrixDefined">transformation matrix</a> of the six values a-f.

  2523    <dt id=translate-function> <code

  2524     class=css>translate(&lt;translation-value&gt;[,

  2525     &lt;translation-value&gt;])</code>

  2527    <dd> specifies a <a href="#TranslateDefined">2D translation</a> by the

  2528     vector [tx, ty], where tx is the first translation-value parameter and ty

  2529     is the optional second translation-value parameter. If

  2530     <em>&lt;ty&gt;</em> is not provided, ty has zero as a value.

  2532    <dt id=translateX-function> <code

  2533     class=css>translateX(&lt;translation-value&gt;)</code>

  2535    <dd> specifies a <a href="#TranslateDefined">translation</a> by the given

  2536     amount in the X direction.

  2538    <dt id=translateY-function> <code

  2539     class=css>translateY(&lt;translation-value&gt;)</code>

  2541    <dd> specifies a <a href="#TranslateDefined">translation</a> by the given

  2542     amount in the Y direction.

  2544    <dt id=scale-function> <code class=css>scale(&lt;number&gt;[,

  2545     &lt;number&gt;])</code>

  2547    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation by the

  2548     [sx,sy] scaling vector described by the 2 parameters. If the second

  2549     parameter is not provided, it takes a value equal to the first. For

  2550     example, scale(1, 1) would leave an element unchanged, while scale(2, 2)

  2551     would cause it to appear twice as long in both the X and Y axes, or four

  2552     times its typical geometric size.

  2554    <dt id=scaleX-function> <code class=css>scaleX(&lt;number&gt;)</code>

  2556    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the

  2557     [sx,1] scaling vector, where sx is given as the parameter.

  2559    <dt id=scaleY-function> <code class=css>scaleY(&lt;number&gt;)</code>

  2561    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the

  2562     [1,sy] scaling vector, where sy is given as the parameter.

  2564    <dt id=rotate-function> <code class=css>rotate(&lt;angle&gt;)</code>

  2566    <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle

  2567     specified in the parameter about the origin of the element, as defined by

  2568     the ‘<a href="#transform-origin"><code

  2569     class=property>transform-origin</code></a>’ property. For example,

  2570     ‘<code class=css>rotate(90deg)</code>’ would cause elements to appear

  2571     rotated one-quarter of a turn in the clockwise direction.

  2573    <dt> <code class=css>skew(&lt;angle&gt;[, &lt;angle&gt;])</code>

  2575    <dd> specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and

  2576     Y. If the second parameter is not provided, it has a zero value.

  2577     <p class=note>Note that the behavior of ‘<code class=css>skew</code>’

  2578      is different from mutliplying ‘<code class=css>skewX</code>’ with

  2579      ‘<code class=css>skewY</code>’. Implementations must support this

  2580      function for compatibility with legacy content.

  2582    <dt id=skewX-function> <code class=css>skewX(&lt;angle&gt;)</code>

  2584    <dd> specifies a <a href="#SkewXDefined">2D skew transformation along the

  2585     X axis</a> by the given angle.

  2587    <dt id=skewY-function> <code class=css>skewY(&lt;angle&gt;)</code>

  2589    <dd> specifies a <a href="#SkewYDefined">2D skew transformation along the

  2590     Y axis</a> by the given angle.

  2591   </dl>

  2593   <h3 id=three-d-transform-functions><span class=secno>15.2. </span>3D

  2594    Transform Functions</h3>

  2596   <dl>

  2597    <dt id=matrix3d-function> <code class=css>matrix3d(&lt;number&gt;,

  2598     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,

  2599     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,

  2600     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,

  2601     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>

  2603    <dd> specifies a 3D transformation as a 4x4 homogeneous matrix of 16

  2604     values in column-major order.

  2606    <dt id=translate3d-function> <code

  2607     class=css>translate3d(&lt;translation-value&gt;,

  2608     &lt;translation-value&gt;, &lt;length&gt;)</code>

  2610    <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the

  2611     vector [tx,ty,tz], with tx, ty and tz being the first, second and third

  2612     translation-value parameters respectively.

  2614    <dt id=translateZ-function> <code

  2615     class=css>translateZ(&lt;length&gt;)</code>

  2617    <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the

  2618     vector [0,0,tz] with the given amount in the Z direction.

  2620    <dt id=scale3d-function> <code class=css>scale3d(&lt;number&gt;,

  2621     &lt;number&gt;, &lt;number&gt;)</code>

  2623    <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation by the

  2624     [sx,sy,sz] scaling vector described by the 3 parameters.

  2626    <dt id=scaleZ-function> <code class=css>scaleZ(&lt;number&gt;)</code>

  2628    <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation using

  2629     the [1,1,sz] scaling vector, where sz is given as the parameter.

  2631    <dt id=rotate3d-function> <code class=css>rotate3d(&lt;number&gt;,

  2632     &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>

  2634    <dd> specifies a <a href="#Rotate3dDefined">3D rotation</a> by the angle

  2635     specified in last parameter about the [x,y,z] direction vector described

  2636     by the first three parameters. A direction vector that cannot be

  2637     normalized, such as [0,0,0], will cause the rotation to not be applied.

  2638     <p class=note>Note that the rotation is clockwise as one looks from the

  2639      end of the vector toward the origin.

  2641    <dt id=rotateX-function> <code class=css>rotateX(&lt;angle&gt;)</code>

  2643    <dd> same as <code class=css>rotate3d(1, 0, 0, &lt;angle&gt;)</code>.

  2645    <dt id=rotateY-function> <code class=css>rotateY(&lt;angle&gt;)</code>

  2647    <dd> same as <code class=css>rotate3d(0, 1, 0, &lt;angle&gt;)</code>.

  2649    <dt id=rotateZ-function> <code class=css>rotateZ(&lt;angle&gt;)</code>

  2651    <dd> same as <code class=css>rotate3d(0, 0, 1, &lt;angle&gt;)</code>,

  2652     which is also the same as <code class=css>rotate(&lt;angle&gt;)</code>.

  2654    <dt id=perspective-function> <code

  2655     class=css>perspective(&lt;length&gt;)</code>

  2657    <dd> specifies a <a href="#PerspectiveDefined">perspective projection

  2658     matrix</a>. This matrix scales points in X and Y based on their Z value,

  2659     scaling points with positive Z values away from the origin, and those

  2660     with negative Z values towards the origin. Points on the z=0 plane are

  2661     unchanged. The parameter represents the distance of the z=0 plane from

  2662     the viewer. Lower values give a more flattened pyramid and therefore a

  2663     more pronounced perspective effect. For example, a value of 1000px gives

  2664     a moderate amount of foreshortening and a value of 200px gives an extreme

  2665     amount. The value for depth must be greater than zero, otherwise the

  2666     function is invalid.

  2667   </dl>

  2668   <!-- ======================================================================================================= -->

  2670   <h2 id=transform-function-lists><span class=secno>16. </span> The Transform

  2671    Function Lists</h2>

  2673   <p> If a list of <var>&lt;transform-functions&gt;</var> is provided, then

  2674    the net effect is as if each transform function had been specified

  2675    separately in the order provided. For example,

  2677   <pre>

  2678 &lt;div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/&gt;

  2679 </pre>

  2681   <p> is functionally equivalent to:

  2683   <pre>

  2684 &lt;div style="transform:translate(-10px,-20px)"&gt;

  2685   &lt;div style="transform:scale(2)"&gt;

  2686     &lt;div style="transform:rotate(45deg)"&gt;

  2687       &lt;div style="transform:translate(5px,10px)"&gt;

  2688       &lt;/div&gt;

  2689     &lt;/div&gt;

  2690   &lt;/div&gt;

  2691 &lt;/div&gt;

  2692 </pre>

  2694   <p> That is, in the absence of other styling that affects position and

  2695    dimensions, a nested set of transforms is equivalent to a single list of

  2696    transform functions, applied from the outside in. The resulting transform

  2697    is the matrix multiplication of the list of transforms.

  2699   <p> If a transform function causes the <a class=term

  2700    href="#current-transformation-matrix-ctm">current transformation matrix

  2701    (CTM)</a> of an object to be non-invertible, the object and its content do

  2702    not get displayed.

  2704   <div class=example>

  2705    <p> The object in the following example gets scaled by 0.

  2707    <pre>&lt;style&gt;

  2708 .box {

  2709     transform: scale(0);

  2710 }

  2711 &lt;/style&gt;

  2713 &lt;div class="box"&gt;

  2714     Not visible

  2715 &lt;/div&gt;</pre>

  2717    <p> The scaling causes a non-invertible CTM for the coordinate space of

  2718     the div box. Therefore neither the div box, nor the text in it get

  2719     displayed.

  2720   </div>

  2721   <!-- ======================================================================================================= -->

  2723   <h2 id=animation><span class=secno>17. </span> Interpolation of Transforms</h2>

  2725   <p> When animating or transitioning transforms, the transform function

  2726    lists must be interpolated. For interpolation between one transform

  2727    <em>from-transform</em> and a second transforms <em>to-transform</em>, the

  2728    rules described below are applied.

  2730   <ul>

  2731    <li id=none-none-animation> If both the <em>from-</em> and

  2732     <em>to-transform</em> are ‘<code class=css>none</code>’:

  2733     <ul>

  2734      <li> There is no interpolation necessary. The computed value stays

  2735       ‘<code class=css>none</code>’.

  2736     </ul>

  2738    <li id=none-transform-animation> If one of the <em>from-</em> or

  2739     <em>to-transforms</em> is ‘<code class=css>none</code>’.

  2740     <ul>

  2741      <li> The value ‘<code class=css>none</code>’ is replaced by an

  2742       equivalent <a href="#TermIdentityTransformFunction"><i>identity

  2743       transform function</i></a> list for the corresponding transform

  2744       function list. Both transform function lists get interpolated following

  2745       the next rule.

  2746     </ul>

  2748     <div class=example>

  2749      <p> For example, if <em>from-transform</em> is ‘<code

  2750       class=css>scale(2)</code>’ and <em>to-transform</em> is ‘<code

  2751       class=css>none</code>’ then the value ‘<code

  2752       class=css>scale(1)</code>’ will be used for <em>to-transform</em> and

  2753       animation will proceed using the next rule. Similarly, if

  2754       <em>from-transform</em> is ‘<code class=css>none</code>’ and

  2755       <em>to-transform</em> is ‘<code class=css>scale(2)

  2756       rotate(50deg)</code>’ then the animation will execute as if

  2757       <em>from-transform</em> is ‘<code class=css>scale(1)

  2758       rotate(0)</code>’.

  2759     </div>

  2761    <li id=transform-transform-animation> If <em>from-</em> and

  2762     <em>to-transform</em> have the same number of transform functions, each

  2763     transform function pair has either the same name, or is a derivative of

  2764     the same <a href="#transform-primitives">primitive</a>.

  2765     <ul>

  2766      <li> Interpolate each transform function pair as described in <a

  2767       href="#interpolation-of-transform-functions">Interpolation of transform

  2768       functions</a>. The computed value is the resulting transform function

  2769       list.

  2770     </ul>

  2772     <div class=example>

  2773      <p> For example, if <em>from-transform</em> is ‘<code

  2774       class=css>scale(1) translate(0)</code>’ and <em>to-transform</em> is

  2775       ‘<code class=css>translate(100px) scale(2)</code>’ then ‘<code

  2776       class=css>scale(1)</code>’ and ‘<code

  2777       class=css>translate(100px)</code>’ as well as ‘<code

  2778       class=css>translate(0)</code>’ and ‘<code

  2779       class=css>scale(2)</code>’ don't share a common primitive and

  2780       therefore can not get interpolated following this rule.

  2781     </div>

  2783    <li id=other-animation> In all other cases:

  2784     <ul>

  2785      <li> The transform functions of each transform function list on the

  2786       <em>from-</em> and <em>to-transform</em> get post multiplied and

  2787       converted into 4x4 matrices. Each of the matrices gets interpolated

  2788       following the instructions in <a

  2789       href="#matrix-interpolation">Interpolation of matrices</a>. The

  2790       computed value is the transform function ‘<code

  2791       class=css>matrix</code>’ if both initial matrices can be represented

  2792       by a correlating 3x2 matrix and ‘<code class=css>matrix3d</code>’

  2793       otherwise.

  2794     </ul>

  2795   </ul>

  2797   <p> In some cases, an animation might cause a transformation matrix to be

  2798    singular or non-invertible. For example, an animation in which scale moves

  2799    from 1 to -1. At the time when the matrix is in such a state, the

  2800    transformed element is not rendered.</p>

  2801   <!-- ======================================================================================================= -->

  2803   <h2 id=transform-primitives><span class=secno>18. </span> Transform

  2804    function primitives and derivatives</h2>

  2806   <p> Some transform functions can be represented by more generic transform

  2807    functions. These transform functions are called derived transform

  2808    functions, the generic transform functions primitives. Primitives for

  2809    two-dimensional and three-dimensional transform functions are listed

  2810    below.

  2812   <p> Two-dimensional primitives with derived transform functions are:

  2814   <dl>

  2815    <dt id=translate-primitive> <code

  2816     class=css>translate(&lt;translation-value&gt;,

  2817     &lt;translation-value&gt;)</code>

  2819    <dd> for <code class=css>translateX(&lt;translation-value&gt;)</code>,

  2820     <code class=css>translateY(&lt;translation-value&gt;)</code> and <code

  2821     class=css>translate(&lt;translation-value&gt;)</code>.

  2823    <dt id=rotate-three-primitive> <code class=css>rotate(&lt;angle&gt;,

  2824     &lt;translation-value&gt;, &lt;translation-value&gt;)</code>

  2826    <dd> for <code class=css>rotate(&lt;angle&gt;)</code> if <a

  2827     href="#svg-transform-functions">rotate with three arguments</a> is

  2828     supported.

  2830    <dt id=scale-primitive> <code class=css>scale(&lt;number&gt;,

  2831     &lt;number&gt;)</code>

  2833    <dd> for <code class=css>scaleX(&lt;number&gt;)</code>, <code

  2834     class=css>scaleY(&lt;number&gt;)</code> and <code

  2835     class=css>scale(&lt;number&gt;)</code>.

  2836   </dl>

  2838   <p> Three-dimensional primitives with derived transform functions are:

  2840   <dl>

  2841    <dt id=translate3d-primitive> <code

  2842     class=css>translate3d(&lt;translation-value&gt;,

  2843     &lt;translation-value&gt;, &lt;length&gt;)</code>

  2845    <dd> for <code class=css>translateX(&lt;translation-value&gt;)</code>,

  2846     <code class=css>translateY(&lt;translation-value&gt;)</code>, <code

  2847     class=css>translateZ(&lt;number&gt;)</code> and <code

  2848     class=css>translate(&lt;translation-value&gt;[,

  2849     &lt;translation-value&gt;])</code>.

  2851    <dt id=scale3d-primitive> <code class=css>scale3d(&lt;number&gt;,

  2852     &lt;number&gt;, &lt;number&gt;)</code>

  2854    <dd> for <code class=css>scaleX(&lt;number&gt;)</code>, <code

  2855     class=css>scaleY(&lt;number&gt;)</code>, <code

  2856     class=css>scaleZ(&lt;number&gt;)</code> and <code

  2857     class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>.

  2859    <dt id=rotate3d-primitive> <code class=css>rotate3d(&lt;number&gt;,

  2860     &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>

  2862    <dd> for <code class=css>rotate(&lt;number&gt;)</code>, <code

  2863     class=css>rotateX(&lt;number&gt;)</code>, <code

  2864     class=css>rotateY(&lt;number&gt;)</code> and <code

  2865     class=css>rotateZ(&lt;number&gt;)</code>.

  2866   </dl>

  2868   <p id=interpolation-two-three-dimensional-function> For derived transform

  2869    functions that have a two-dimensional primitive and a three-dimensional

  2870    primitive, the context decides about the used primitive. See <a

  2871    href="#interpolation-of-transform-functions">Interpolation of primitives

  2872    and derived transform functions</a>.</p>

  2873   <!-- ======================================================================================================= -->

  2875   <h2 id=interpolation-of-transform-functions><span class=secno>19. </span>

  2876    Interpolation of primitives and derived transform functions</h2>

  2878   <p> Two transform functions with the same name and the same number of

  2879    arguments are interpolated numerically without a former conversion. The

  2880    calculated value will be of the same transform function type with the same

  2881    number of arguments. Special rules apply to ‘<code

  2882    class=css>rotate3d</code>’, ‘<code class=css>matrix</code>’,

  2883    ‘<code class=css>matrix3d</code>’ and ‘<a href="#perspective"><code

  2884    class=css>perspective</code></a>’.

  2886   <div class=example>

  2887    <p> The two transform functions ‘<code class=css>translate(0)</code>’

  2888     and ‘<code class=css>translate(100px)</code>’ are of the same type,

  2889     have the same number of arguments and therefore can get interpolated

  2890     numerically. ‘<code class=css>translateX(100px)</code>’ is not of the

  2891     same type and ‘<code class=css>translate(100px, 0)</code>’ does not

  2892     have the same number of arguments, therefore these transform functions

  2893     can not get interpolated without a former conversion step.

  2894   </div>

  2896   <p> Two different types of transform functions that share the same

  2897    primitive, or transform functions of the same type with different number

  2898    of arguments can be interpolated. Both transform functions need a former

  2899    conversion to the common primitive first and get interpolated numerically

  2900    afterwards. The computed value will be the primitive with the resulting

  2901    interpolated arguments.

  2903   <div class=example>

  2904    <p> The following example describes a transition from ‘<code

  2905     class=css>translateX(100px)</code>’ to ‘<code

  2906     class=css>translateY(100px)</code>’ in 3 seconds on hovering over the

  2907     div box. Both transform functions derive from the same primitive <code

  2908     class=css>translate(&lt;translation-value&gt;,

  2909     &lt;translation-value&gt;)</code> and therefore can be interpolated.

  2911    <pre>div {

  2912     transform: translateX(100px);

  2913 }

  2915 div:hover {

  2916     transform: translateY(100px);

  2917     transition: transform 3s;

  2918 }</pre>

  2920    <p> For the time of the transition both transform functions get

  2921     transformed to the common primitive. ‘<code

  2922     class=css>translateX(100px)</code>’ gets converted to ‘<code

  2923     class=css>translate(100px, 0)</code>’ and ‘<code

  2924     class=css>translateY(100px)</code>’ gets converted to ‘<code

  2925     class=css>translate(0, 100px)</code>’. Both transform functions can

  2926     then get interpolated numerically.

  2927   </div>

  2929   <p> If both transform functions share a primitive in the two-dimensional

  2930    space, both transform functions get converted to the two-dimensional

  2931    primitive. If one or both transform functions are three-dimensional

  2932    transform functions, the common three-dimensional primitive is used.

  2934   <div class=example>

  2935    <p> In this example a two-dimensional transform function gets animated to

  2936     a three-dimensional transform function. The common primitive is <code

  2937     class=css>translate3d</code>.

  2939    <pre>div {

  2940     transform: translateX(100px);

  2941 }

  2943 div:hover {

  2944     transform: translateZ(100px);

  2945     transition: transform 3s;

  2946 }</pre>

  2948    <p> First ‘<code class=css><code

  2949     class=css>translateX(100px)</code></code>’ gets converted to ‘<code

  2950     class=css><code class=css>translate3d(100px, 0, 0)</code></code>’ and

  2951     ‘<code class=css><code class=css>translateZ(100px)</code></code>’ to

  2952     ‘<code class=css><code class=css>translate3d(0, 0,

  2953     100px)</code></code>’ respectively. Then both converted transform

  2954     functions get interpolated numerically.

  2955   </div>

  2957   <p> The transform functions ‘<code class=css>matrix</code>’, ‘<code

  2958    class=css>matrix3d</code>’ and ‘<a href="#perspective"><code

  2959    class=css>perspective</code></a>’ get converted into 4x4 matrices first

  2960    and interpolated as defined in section <a

  2961    href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.

  2963   <p> For interpolatations with the primitive ‘<code

  2964    class=css>rotate3d</code>’, the direction vectors of the transform

  2965    functions get normalized first. If the normalized vectors are equal, the

  2966    rotation angle gets interpolated numerically. Otherwise the transform

  2967    functions get converted into 4x4 matrices first and interpolated as

  2968    defined in section <a href="#matrix-interpolation">Interpolation of

  2969    Matrices</a> afterwards.</p>

  2970   <!-- ======================================================================================================= -->

  2972   <h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of

  2973    Matrices</h2>

  2975   <p> When interpolating between two matrices, each is decomposed into the

  2976    corresponding translation, rotation, scale, skew and perspective values.

  2977    Not all matrices can be accurately described by these values. Those that

  2978    can't are decomposed into the most accurate representation possible, using

  2979    the pseudocode in <a href="#matrix-decomposing">Decomposing the

  2980    Matrix</a>. The resulting values get <a

  2981    href="#matrix-values-interpolation">interpolated numerically</a> and <a

  2982    href="#matrix-recomposing">recomposed back to a matrix</a> in a final

  2983    step.

  2985   <div class=note>

  2986    <p> In the following example the element gets translated by 100 pixel in

  2987     both the X and Y directions and rotated by 1170 degree on hovering. The

  2988     initial transformation is 45 degree. With the usage of transition, an

  2989     author might expect a animated, clockwise rotation by three and a quarter

  2990     turn (1170 degree).

  2992    <pre>

  2993 &lt;style&gt;

  2994 div {

  2995     transform: rotate(45deg);

  2996 }

  2997 div:hover {

  2998     transform: translate(100px, 100px) rotate(1215deg);

  2999     transition: transform 3s;

  3000 }

  3001 &lt;/style&gt;

  3003 &lt;div&gt;&lt;/div&gt;</pre>

  3005    <p> The number of transform functions on the source transform ‘<code

  3006     class=css>rotate(45deg)</code>’ differs from the number of transform

  3007     functions on the destination transform ‘<code

  3008     class=css>translate(100px, 100px) rotate(1125deg)</code>’. According to

  3009     the last rule of <a href="#animation">Interpolation of Transforms</a>,

  3010     both transforms must be interpolated by matrix interpolation. With

  3011     converting the transformation functions to matrices, the information

  3012     about the three turns gets lost and the element gets rotated by just a

  3013     quarter turn (90 degree).

  3015    <p> To achieve the three and a quarter turns for the example above, source

  3016     and destination transforms must fulfill the third rule of <a

  3017     href="#animation">Interpolation of Transforms</a>. Source transform could

  3018     look like ‘<code class=css>translate(0, 0) rotate(45deg)</code>’ for

  3019     a linearly interpolation of the transform functions.

  3020   </div>

  3022   <p> If one of the matrices for interpolation is non-invertible, the used

  3023    animation function must fallback to a discrete animation according to the

  3024    rules of the respective animation specification.

  3026   <h3 id=matrix-decomposing><span class=secno>20.1. </span>Decomposing the

  3027    Matrix</h3>

  3029   <p> The pseudocode below is based upon the "unmatrix" method in "Graphics

  3030    Gems II, edited by Jim Arvo", but modified to use Quaternions instead of

  3031    Euler angles to avoid the problem of Gimbal Locks.

  3033   <p> The following pseudocode works on a 4x4 homogeneous matrix:

  3035   <pre>

  3036 Input:  matrix      ; a 4x4 matrix

  3037 Output: translation ; a 3 component vector

  3038         scale       ; a 3 component vector

  3039         skew        ; skew factors XY,XZ,YZ represented as a 3 component vector

  3040         perspective ; a 4 component vector

  3041         quaternion  ; a 4 component vector

  3042 Returns false if the matrix cannot be decomposed, true if it can

  3044 Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix):

  3045   double  determinant(matrix)          returns the 4x4 determinant of the matrix

  3046   matrix  inverse(matrix)              returns the inverse of the passed matrix

  3047   matrix  transpose(matrix)            returns the transpose of the passed matrix

  3048   point   multVecMatrix(point, matrix) multiplies the passed point by the passed matrix

  3049                                        and returns the transformed point

  3050   double  length(point)                returns the length of the passed vector

  3051   point   normalize(point)             normalizes the length of the passed point to 1

  3052   double  dot(point, point)            returns the dot product of the passed points

  3053   double  sqrt(double)                 returns the root square of passed value

  3054   double  max(double y, double x)      returns the bigger value of the two passed values

  3056 Decomposition also makes use of the following function:

  3057   point combine(point a, point b, double ascl, double bscl)

  3058       result[0] = (ascl * a[0]) + (bscl * b[0])

  3059       result[1] = (ascl * a[1]) + (bscl * b[1])

  3060       result[2] = (ascl * a[2]) + (bscl * b[2])

  3061       return result

  3063 // Normalize the matrix.

  3064 if (matrix[3][3] == 0)

  3065     return false

  3067 for (i = 0; i < 4; i++)

  3068     for (j = 0; j < 4; j++)

  3069         matrix[i][j] /= matrix[3][3]

  3071 // perspectiveMatrix is used to solve for perspective, but it also provides

  3072 // an easy way to test for singularity of the upper 3x3 component.

  3073 perspectiveMatrix = matrix

  3075 for (i = 0; i < 3; i++)

  3076     perspectiveMatrix[i][3] = 0

  3078 perspectiveMatrix[3][3] = 1

  3080 if (determinant(perspectiveMatrix) == 0)

  3081     return false

  3083 // First, isolate perspective.

  3084 if (matrix[0][3] != 0 || matrix[1][3] != 0 || matrix[2][3] != 0)

  3085     // rightHandSide is the right hand side of the equation.

  3086     rightHandSide[0] = matrix[0][3];

  3087     rightHandSide[1] = matrix[1][3];

  3088     rightHandSide[2] = matrix[2][3];

  3089     rightHandSide[3] = matrix[3][3];

  3091     // Solve the equation by inverting perspectiveMatrix and multiplying

  3092     // rightHandSide by the inverse.

  3093     inversePerspectiveMatrix = inverse(perspectiveMatrix)

  3094     transposedInversePerspectiveMatrix = transposeMatrix4(inversePerspectiveMatrix)

  3095     perspective = multVecMatrix(rightHandSide, transposedInversePerspectiveMatrix)

  3096 else

  3097     // No perspective.

  3098     perspective[0] = perspective[1] = perspective[2] = 0

  3099     perspective[3] = 1

  3101 // Next take care of translation

  3102 for (i = 0; i < 3; i++)

  3103     translate[i] = matrix[3][i]

  3105 // Now get scale and shear. 'row' is a 3 element array of 3 component vectors

  3106 for (i = 0; i < 3; i++)

  3107     row[i][0] = matrix[i][0]

  3108     row[i][1] = matrix[i][1]

  3109     row[i][2] = matrix[i][2]

  3111 // Compute X scale factor and normalize first row.

  3112 scale[0] = length(row[0])

  3113 row[0] = normalize(row[0])

  3115 // Compute XY shear factor and make 2nd row orthogonal to 1st.

  3116 skew[0] = dot(row[0], row[1])

  3117 row[1] = combine(row[1], row[0], 1.0, -skew[0])

  3119 // Now, compute Y scale and normalize 2nd row.

  3120 scale[1] = length(row[1])

  3121 row[1] = normalize(row[1])

  3122 skew[0] /= scale[1];

  3124 // Compute XZ and YZ shears, orthogonalize 3rd row

  3125 skew[1] = dot(row[0], row[2])

  3126 row[2] = combine(row[2], row[0], 1.0, -skew[1])

  3127 skew[2] = dot(row[1], row[2])

  3128 row[2] = combine(row[2], row[1], 1.0, -skew[2])

  3130 // Next, get Z scale and normalize 3rd row.

  3131 scale[2] = length(row[2])

  3132 row[2] = normalize(row[2])

  3133 skew[1] /= scale[2]

  3134 skew[2] /= scale[2]

  3136 // At this point, the matrix (in rows) is orthonormal.

  3137 // Check for a coordinate system flip.  If the determinant

  3138 // is -1, then negate the matrix and the scaling factors.

  3139 pdum3 = cross(row[1], row[2])

  3140 if (dot(row[0], pdum3) < 0)

  3141     for (i = 0; i < 3; i++)

  3142         scale[i] *= -1;

  3143         row[i][0] *= -1

  3144         row[i][1] *= -1

  3145         row[i][2] *= -1

  3147 // Now, get the rotations out

  3148 quaternion[0] = 0.5 * sqrt(max(1 + row[0][0] - row[1][1] - row[2][2], 0))

  3149 quaternion[1] = 0.5 * sqrt(max(1 - row[0][0] + row[1][1] - row[2][2], 0))

  3150 quaternion[2] = 0.5 * sqrt(max(1 - row[0][0] - row[1][1] + row[2][2], 0))

  3151 quaternion[3] = 0.5 * sqrt(max(1 + row[0][0] + row[1][1] + row[2][2], 0))

  3153 if (row[2][1] > row[1][2])

  3154     quaternion[0] = -quaternion[0]

  3155 if (row[0][2] > row[2][0])

  3156     quaternion[1] = -quaternion[1]

  3157 if (row[1][0] > row[0][1])

  3158     quaternion[2] = -quaternion[2]

  3160 return true</pre>

  3162   <h3 id=matrix-values-interpolation><span class=secno>20.2. </span>

  3163    Interpolation of decomposed matrix values</h3>

  3165   <p> Each component of the decomposed values translation, scale, skew and

  3166    perspective of the source matrix get linearly interpolated with each

  3167    corresponding component of the destination matrix.

  3169   <p class=note> For instance, <code>translate[0]</code> of the source matrix

  3170    and <code>translate[0]</code> of the destination matrix are interpolated

  3171    numerically, and the result is used to set the translation of the

  3172    animating element.

  3174   <p> Quaternions of the decomposed source matrix are interpolated with

  3175    quaternions of the decomposed destination matrix using the spherical

  3176    linear interpolation (Slerp) as described by the pseudocode below:

  3178   <pre>

  3179 Input:  quaternionA   ; a 4 component vector

  3180         quaternionB   ; a 4 component vector

  3181         t             ; interpolation parameter with 0 <= t <= 1

  3182 Output: quaternionDst ; a 4 component vector

  3184 Supporting functions (vector is a 4 component vector):

  3185   double  dot(vector, vector)         returns the dot product of the passed vectors

  3186   vector  multVector(vector, vector)  multiplies the passed vectors

  3187   double  sqrt(double)                returns the root square of passed value

  3188   double  max(double y, double x)     returns the bigger value of the two passed values

  3189   double  min(double y, double x)     returns the smaller value of the two passed values

  3190   double  cos(double)                 returns the cosines of passed value

  3191   double  sin(double)                 returns the sine of passed value

  3192   double  acos(double)                returns the inverse cosine of passed value

  3195 product = dot(quaternionA, quaternionB)

  3197 // Clamp product to -1.0 <= product <= 1.0

  3198 product = max(product, 1.0)

  3199 product = min(product, -1.0)

  3201 if (product == 1.0)

  3202    quaternionDst = quaternionA

  3203    return

  3205 theta = acos(dot)

  3206 w = sin(t * theta) * 1 / sqrt(1 - product * product)

  3208 for (i = 0; i < 4; i++)

  3209   quaternionA[i] *= cos(t * theta) - product * w

  3210   quaternionB[i] *= w

  3211   quaternionDst[i] = quaternionA[i] + quaternionB[i]

  3213 return</pre>

  3215   <h3 id=matrix-recomposing><span class=secno>20.3. </span> Recomposing the

  3216    Matrix</h3>

  3218   <p> After interpolation the resulting values are used to transform the

  3219    elements user space. One way to use these values is to recompose them into

  3220    a 4x4 matrix. This can be done following the pseudocode below:

  3222   <pre>

  3223 Input:  translation ; a 3 component vector

  3224         scale       ; a 3 component vector

  3225         skew        ; skew factors XY,XZ,YZ represented as a 3 component vector

  3226         perspective ; a 4 component vector

  3227         quaternion  ; a 4 component vector

  3228 Output: matrix      ; a 4x4 matrix

  3230 Supporting functions (matrix is a 4x4 matrix):

  3231   matrix  multiply(matrix a, matrix b)   returns the 4x4 matrix product of a * b

  3233 // apply perspective

  3234 for (i = 0; i < 4; i++)

  3235   matrix[i][3] = perspective[i]

  3237 // apply translation

  3238 for (i = 0; i < 3; i++)

  3239   for (j = 0; j < 3; j++)

  3240     matrix[3][i] += translation[j] * matrix[j][i]

  3242 // apply rotation

  3243 x = quaternion[0]

  3244 y = quaternion[1]

  3245 z = quaternion[2]

  3246 w = quaternion[3]

  3248 // Construct a composite rotation matrix from the quaternion values

  3249 // rotationMatrix is a identity 4x4 matrix initially

  3250 rotationMatrix[0][0] = 1 - 2 * (y * y + z * z)

  3251 rotationMatrix[0][1] = 2 * (x * y - z * w)

  3252 rotationMatrix[0][2] = 2 * (x * z + y * w)

  3253 rotationMatrix[1][0] = 2 * (x * y + z * w)

  3254 rotationMatrix[1][1] = 1 - 2 * (x * x + z * z)

  3255 rotationMatrix[1][2] = 2 * (y * z - x * w)

  3256 rotationMatrix[2][0] = 2 * (x * z - y * w)

  3257 rotationMatrix[2][1] = 2 * (y * z + x * w)

  3258 rotationMatrix[2][2] = 1 - 2 * (x * x + y * y)

  3260 matrix = multiply(matrix, rotationMatrix)

  3262 // apply skew

  3263 // temp is a identity 4x4 matrix initially

  3264 if (skew[2])

  3265     temp[2][1] = skew[2]

  3266     matrix = multiply(matrix, temp)

  3268 if (skew[1])

  3269     temp[2][1] = 0

  3270     temp[2][0] = skew[1]

  3271     matrix = multiply(matrix, temp)

  3273 if (skew[0])

  3274     temp[2][0] = 0

  3275     temp[1][0] = skew[0]

  3276     matrix = multiply(matrix, temp)

  3278 // apply scale

  3279 for (i = 0; i < 3; i++)

  3280   for (j = 0; j < 3; j++)

  3281     matrix[i][j] *= scale[i]

  3283 return</pre>

  3285   <h2 id=mathematical-description><span class=secno>21. </span> Mathematical

  3286    Description of Transform Functions</h2>

  3288   <p> Mathematically, all transform functions can be represented as 4x4

  3289    transformation matrices of the following form:

  3291   <p> <img

  3292    alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}"

  3293    height=106 src=4x4matrix.png width=222>

  3295   <p> One translation unit on a matrix is equivalent to 1 pixel in the local

  3296    coordinate system of the element.

  3298   <ul>

  3299    <li id=MatrixDefined>

  3300     <p> A 2D 3x2 matrix with six parameters <em>a</em>, <em>b</em>,

  3301      <em>c</em>, <em>d</em>, <em>e</em> and <em>f</em> is equivalent to the

  3302      matrix:</p>

  3303     <img

  3304     alt="\begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"

  3305     height=106 src=matrix.png width=108>

  3307    <li id=TranslateDefined>

  3308     <p> A 2D translation with the parameters <em>tx</em> and <em>ty</em> is

  3309      equivalent to a <a href="#Translate3dDefined">3D translation</a> where

  3310      <em>tz</em> has zero as a value.

  3312    <li id=ScaleDefined>

  3313     <p> A 2D scaling with the parameters <em>sx</em> and <em>sy</em> is

  3314      equivalent to a <a href="#Scale3dDefined">3D scale</a> where <em>sz</em>

  3315      has one as a value.

  3317    <li id=RotateDefined>

  3318     <p> A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a

  3319      href="#Rotate3dDefined">3D rotation</a> with vector [0,0,1] and

  3320      parameter <em>alpha</em>.

  3322    <li id=SkewDefined>

  3323     <p> A 2D skew like transformation with the parameters <em>alpha</em> and

  3324      <em>beta</em> is equivalent to the matrix:</p>

  3325     <img

  3326     alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"

  3327     height=106 src=skew.png width=205>

  3329    <li id=SkewXDefined>

  3330     <p> A 2D skew transformation along the X axis with the parameter

  3331      <em>alpha</em> is equivalent to the matrix:</p>

  3332     <img

  3333     alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"

  3334     height=106 src=skewX.png width=155>

  3336    <li id=SkewYDefined>

  3337     <p> A 2D skew transformation along the Y axis with the parameter

  3338      <em>beta</em> is equivalent to the matrix:</p>

  3339     <img

  3340     alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"

  3341     height=106 src=skewY.png width=155>

  3343    <li id=Translate3dDefined>

  3344     <p> A 3D translation with the parameters <em>tx</em>, <em>ty</em> and

  3345      <em>tz</em> is equivalent to the matrix:</p>

  3346     <img

  3347     alt="\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}"

  3348     height=106 src=translate3d.png width=114>

  3350    <li id=Scale3dDefined>

  3351     <p> A 3D scaling with the parameters <em>sx</em>, <em>sy</em> and

  3352      <em>sz</em> is equivalent to the matrix:</p>

  3353     <img

  3354     alt="\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"

  3355     height=106 src=scale3d.png width=137>

  3357    <li id=Rotate3dDefined>

  3358     <p> A 3D rotation with the vector [x,y,z] and the parameter

  3359      <em>alpha</em> is equivalent to the matrix:</p>

  3360     <img

  3361     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}"

  3362     height=106 src=rotate3dmatrix.png width=647>

  3363     <p> where:</p>

  3364     <img

  3365     alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)"

  3366     height=50 src=rotate3dvariables.png width=221>

  3368    <li id=PerspectiveDefined>

  3369     <p> A perspective projection matrix with the parameter <em>d</em> is

  3370      equivalent to the matrix:</p>

  3371     <img

  3372     alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}"

  3373     height=106 src=perspective.png width=143>

  3374   </ul>

  3376   <h2 id=references><span class=secno>22. </span>References</h2>

  3378   <h3 class=no-num id=normative-references>Normative references</h3>

  3379   <!--begin-normative-->

  3380   <!-- Sorted by label -->

  3382   <dl class=bibliography>

  3383    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3384     <!---->

  3386    <dt id=CSS21>[CSS21]

  3388    <dd>Bert Bos; et al. <a

  3389     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style

  3390     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June

  3391     2011. W3C Recommendation. URL: <a

  3392     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>

  3393    </dd>

  3394    <!---->

  3396    <dt id=CSS3BG>[CSS3BG]

  3398    <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a

  3399     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS

  3400     Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C

  3401     Candidate Recommendation. (Work in progress.) URL: <a

  3402     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>

  3403    </dd>

  3404    <!---->

  3406    <dt id=SVG11>[SVG11]

  3408    <dd>Erik Dahlström; et al. <a

  3409     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable

  3410     Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.

  3411     W3C Recommendation. URL: <a

  3412     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>

  3413    </dd>

  3414    <!---->

  3415   </dl>

  3416   <!--end-normative-->

  3418   <h3 class=no-num id=other-references>Other references</h3>

  3419   <!--begin-informative-->

  3420   <!-- Sorted by label -->

  3422   <dl class=bibliography>

  3423    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  3424     <!---->

  3426    <dt id=SMIL3>[SMIL3]

  3428    <dd>Dick Bulterman. <a

  3429     href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized

  3430     Multimedia Integration Language (SMIL 3.0).</cite></a> 1 December 2008.

  3431     W3C Recommendation. URL: <a

  3432     href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">http://www.w3.org/TR/2008/REC-SMIL3-20081201/</a>

  3433    </dd>

  3434    <!---->

  3435   </dl>

  3436   <!--end-informative-->

  3438   <h2 class=no-num id=property-index>Property index</h2>

  3439   <!--begin-properties-->

  3441   <table class=proptable>

  3442    <thead>

  3443     <tr>

  3444      <th>Property

  3446      <th>Values

  3448      <th>Initial

  3450      <th>Applies to

  3452      <th>Inh.

  3454      <th>Percentages

  3456      <th>Media

  3458    <tbody>

  3459     <tr>

  3460      <th><a class=property

  3461       href="#backface-visibility">backface-visibility</a>

  3463      <td>visible | hidden

  3465      <td>visible

  3467      <td>transformable elements

  3469      <td>no

  3471      <td>N/A

  3473      <td>visual

  3475     <tr>

  3476      <th><a class=property href="#perspective">perspective</a>

  3478      <td>none | &lt;length&gt;

  3480      <td>none

  3482      <td>transformable elements

  3484      <td>no

  3486      <td>N/A

  3488      <td>visual

  3490     <tr>

  3491      <th><a class=property href="#perspective-origin">perspective-origin</a>

  3493      <td>[ &lt;percentage> | &lt;length> | left | center | right | top |

  3494       bottom] | [   [ &lt;percentage> | &lt;length&gt; | left | center |

  3495       right ]   &amp;&amp;   [ &lt;percentage> | &lt;length&gt; | top |

  3496       center | bottom ] ]

  3498      <td>50% 50%

  3500      <td>transformable elements

  3502      <td>no

  3504      <td>refer to the size of the bounding box

  3506      <td>visual

  3508     <tr>

  3509      <th><a class=property href="#effects">transform</a>

  3511      <td>none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*

  3513      <td>none

  3515      <td>transformable elements

  3517      <td>no

  3519      <td>refer to the size of bounding box

  3521      <td>visual

  3523     <tr>

  3524      <th><a class=property href="#transform-origin">transform-origin</a>

  3526      <td>[ &lt;percentage> | &lt;length> | left | center | right | top |

  3527       bottom] | [   [ &lt;percentage> | &lt;length&gt; | left | center |

  3528       right ]   &amp;&amp;   [ &lt;percentage> | &lt;length&gt; | top |

  3529       center | bottom ] ] &lt;length&gt;?

  3531      <td>50% 50%

  3533      <td>transformable elements

  3535      <td>no

  3537      <td>refer to the size of bounding box

  3539      <td>visual

  3541     <tr>

  3542      <th><a class=property href="#transform-style">transform-style</a>

  3544      <td>flat | preserve-3d

  3546      <td>flat

  3548      <td>transformable elements

  3550      <td>no

  3552      <td>N/A

  3554      <td>visual

  3555   </table>

  3556   <!--end-properties-->

  3558   <h2 class=no-num id=index>Index</h2>

  3559   <!--begin-index-->

  3561   <ul class=indexlist>

  3562    <li>3D rendering context, <a href="#d-rendering-context"

  3563     title="section 4."><strong>4.</strong></a>

  3565    <li>accumulated 3D transformation matrix, <a

  3566     href="#accumulated-3d-transformation-matrix"

  3567     title="section 4."><strong>4.</strong></a>

  3569    <li>backface-visibility, <a href="#backface-visibility"

  3570     title="section 12."><strong>12.</strong></a>

  3572    <li>‘<code class=css>bottom</code>’

  3573     <ul>

  3574      <li>‘<a href="#perspective-origin"><code

  3575       class=property>perspective-origin</code></a>’ value, <a

  3576       href="#bottom0" title="section 11."><strong>11.</strong></a>

  3578      <li>‘<a href="#transform-origin"><code

  3579       class=property>transform-origin</code></a>’ value, <a href="#bottom"

  3580       title="section 8."><strong>8.</strong></a>

  3581     </ul>

  3583    <li>bounding box, <a href="#bounding-box"

  3584     title="section 4."><strong>4.</strong></a>

  3586    <li>‘<code class=css>center</code>’

  3587     <ul>

  3588      <li>‘<a href="#perspective-origin"><code

  3589       class=property>perspective-origin</code></a>’ value, <a

  3590       href="#center0" title="section 11."><strong>11.</strong></a>

  3592      <li>‘<a href="#transform-origin"><code

  3593       class=property>transform-origin</code></a>’ value, <a href="#center"

  3594       title="section 8."><strong>8.</strong></a>

  3595     </ul>

  3597    <li>current transformation matrix (CTM), <a

  3598     href="#current-transformation-matrix-ctm"

  3599     title="section 4."><strong>4.</strong></a>

  3601    <li>identity transform function, <a href="#identity-transform-function"

  3602     title="section 4."><strong>4.</strong></a>

  3604    <li>‘<code class=css>left</code>’

  3605     <ul>

  3606      <li>‘<a href="#perspective-origin"><code

  3607       class=property>perspective-origin</code></a>’ value, <a href="#left0"

  3608       title="section 11."><strong>11.</strong></a>

  3610      <li>‘<a href="#transform-origin"><code

  3611       class=property>transform-origin</code></a>’ value, <a href="#left"

  3612       title="section 8."><strong>8.</strong></a>

  3613     </ul>

  3615    <li>local coordinate system, <a href="#local-coordinate-system"

  3616     title="section 4."><strong>4.</strong></a>

  3618    <li>perspective, <a href="#perspective"

  3619     title="section 10."><strong>10.</strong></a>

  3621    <li>perspective matrix, <a href="#perspective-matrix"

  3622     title="section 4."><strong>4.</strong></a>

  3624    <li>perspective-origin, <a href="#perspective-origin"

  3625     title="section 11."><strong>11.</strong></a>

  3627    <li>‘<code class=css>right</code>’

  3628     <ul>

  3629      <li>‘<a href="#perspective-origin"><code

  3630       class=property>perspective-origin</code></a>’ value, <a

  3631       href="#right0" title="section 11."><strong>11.</strong></a>

  3633      <li>‘<a href="#transform-origin"><code

  3634       class=property>transform-origin</code></a>’ value, <a href="#right"

  3635       title="section 8."><strong>8.</strong></a>

  3636     </ul>

  3638    <li>‘<code class=css>top</code>’

  3639     <ul>

  3640      <li>‘<a href="#perspective-origin"><code

  3641       class=property>perspective-origin</code></a>’ value, <a href="#top0"

  3642       title="section 11."><strong>11.</strong></a>

  3644      <li>‘<a href="#transform-origin"><code

  3645       class=property>transform-origin</code></a>’ value, <a href="#top"

  3646       title="section 8."><strong>8.</strong></a>

  3647     </ul>

  3649    <li>transform, <a href="#effects"

  3650     title="section 7."><strong>7.</strong></a>

  3652    <li>transformable element, <a href="#transformable-element"

  3653     title="section 4."><strong>4.</strong></a>

  3655    <li>transformation matrix, <a href="#transformation-matrix"

  3656     title="section 4."><strong>4.</strong></a>

  3658    <li>transform-origin, <a href="#transform-origin"

  3659     title="section 8."><strong>8.</strong></a>

  3661    <li>transform-style, <a href="#transform-style"

  3662     title="section 9."><strong>9.</strong></a>

  3664    <li>user coordinate system, <a href="#user-coordinate-system"

  3665     title="section 4."><strong>4.</strong></a>

  3666   </ul>

  3667   <!--end-index-->

  3668 </html>

  3669 <!-- Keep this comment at the end of the file

  3670 Local variables:

  3671 mode: sgml

  3672 sgml-declaration:"~/SGML/HTML4.decl"

  3673 sgml-default-doctype-name:"html"

  3674 sgml-minimize-attributes:t

  3675 sgml-nofill-elements:("pre" "style" "br")

  3676 sgml-live-element-indicator:t

  3677 sgml-omittag:nil

  3678 sgml-shorttag:nil

  3679 sgml-namecase-general:t

  3680 sgml-general-insert-case:lower

  3681 sgml-always-quote-attributes:t

  3682 sgml-indent-step:nil

  3683 sgml-indent-data:t

  3684 sgml-parent-document:nil

  3685 sgml-exposed-tags:nil

  3686 sgml-local-catalogs:nil

  3687 sgml-local-ecat-files:nil

  3688 End:

  3689 -->

Mercurial > drafts / file revision

css3-transforms/Overview.html@55d46b236cf3

css3-transforms/Overview.html