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

css3-transforms/Overview.html@55d46b236cf3 (annotated)

css3-transforms/Overview.html

Tue, 05 Feb 2013 13:50:38 -0700

author: L. David Baron <dbaron@dbaron.org>
date: Tue, 05 Feb 2013 13:50:38 -0700
changeset 7349: 55d46b236cf3
parent 7338: 7c1a3923a1d5
child 7701: 74e801dd7a86
permissions: -rwxr-xr-x

[css3-transforms] Add Animatable: lines to propdef tables.

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html lang=en>
  <head
   profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <title>CSS Transforms</title>
   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=dcterms.rights>
   <meta content="CSS Transforms" name=dcterms.title>
   <meta content=text name=dcterms.type>
   <meta content=2013-02-05 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-transforms/"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://www.w3.org/TR/2013/ED-css3-transforms-20130205/"
    name=dcterms.identifier>
   <link href="../default.css" rel=stylesheet type="text/css">
   <script defer=defer
    src="http://test.csswg.org/harness/annotate.js#CSS3-TRANSFORMS_DEV"
    type="text/javascript"></script>
   <style type="text/css">
       .term {
         font-style: italic;
       }
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    type="text/css">
  <body>
   <div class=head id=div-head> <!--begin-logo-->
    <p><a href="http://www.w3.org/"><img alt=W3C height=48
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    <h1>CSS Transforms</h1>
    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 February
 </h2>
    <dl>
     <dt>This version:
     <dd> <a
      href="http://www.w3.org/TR/2013/ED-css3-transforms-20130205/">http://dev.w3.org/csswg/css3-transforms/</a>
      <!--http://www.w3.org/TR/2013/WD-css3-transforms-20130205/-->
     <dt>Latest version:
     <dd><a
      href="http://www.w3.org/TR/css3-transforms/">http://www.w3.org/TR/css3-transforms/</a>
     <dt>Editor's draft:
     <dd><a
      href="http://dev.w3.org/csswg/css3-transforms/">http://dev.w3.org/csswg/css3-transforms/</a>
     <dt>Previous version:
     <dd><a
      href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
     <dt id=editors-list>Editors:
     <dd>Simon Fraser (<a href="http://www.apple.com/">Apple Inc</a>)
      &lt;simon.fraser @apple.com&gt;
     <dd>Dean Jackson (<a href="http://www.apple.com/">Apple Inc</a>) &lt;dino
      @apple.com&gt;
     <dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>)
      &lt;eoconnor @apple.com&gt;
     <dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>)
      &lt;dschulze @adobe.com&gt;
     <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) &lt;ayg
      @aryeh.name&gt;
     <dt id=former-editors-list>Former Editors:
     <dd>David Hyatt (<a href="http://www.apple.com/">Apple Inc</a>) &lt;hyatt
      @apple.com&gt;
     <dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>)
      &lt;cmarrin @apple.com&gt;
     <dt>Issues list:
     <dd><a
      href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transforms&amp;resolution=---&amp;cmdtype=doit">in
      Bugzilla</a>
     <dt>Test suite:
     <dd>none yet
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
     href="http://www.csail.mit.edu/"><abbr
     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
     href="http://www.ercim.eu/"><abbr
     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
     <a href="http://www.keio.ac.jp/">Keio</a>, <a
     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
     and <a
     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
     use</a> rules apply.</p>
    <!--end-copyright-->
    <hr title="Separator for header">
   </div>
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   <p>CSS transforms allows elements styled with CSS to be transformed in
    two-dimensional or three-dimensional space. This specification is the
    convergence of the <a href="http://www.w3.org/TR/css3-2d-transforms/">CSS
 D transforms</a>, <a href="http://www.w3.org/TR/css3-3d-transforms/">CSS
 D transforms</a> and <a
    href="http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/">SVG
    transforms</a> specifications.
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   <!--begin-status-->
   <p>This is a public copy of the editors' draft. It is provided for
    discussion only and may change at any moment. Its publication here does
    not imply endorsement of its contents by W3C. Don't cite this document
    other than as work in progress.
   <p>The (<a
    href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>) public
    mailing list <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (see
    <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
    for discussion of this specification. When sending e-mail, please put the
    text “css3-transforms” in the subject, preferably like this:
    “[<!---->css3-transforms<!---->] <em>…summary of comment…</em>”
   <p>This document was produced by the <a
    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
    the <a href="http://www.w3.org/Style/">Style Activity</a>) and the <a
    href="http://www.w3.org/Graphics/SVG/">SVG Working Group</a> (part of the
    <a href="http://www.w3.org/Graphics/">Graphics Activity</a>).
   <p>This document was produced by groups operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
 W3C Patent Policy</a>. W3C maintains a <a
    href="http://www.w3.org/2004/01/pp-impl/32061/status"
    rel=disclosure>public list of any patent disclosures (CSS)</a> and a <a
    href="http://www.w3.org/2004/01/pp-impl/19480/status"
    rel=disclosure>public list of any patent disclosures (SVG)</a> made in
    connection with the deliverables of each group; these pages also include
    instructions for disclosing a patent. An individual who has actual
    knowledge of a patent which the individual believes contains <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
 of the W3C Patent Policy</a>.</p>
   <!--end-status-->
   <p> This specification replaces the former <a
    href="http://www.w3.org/TR/css3-2d-transforms/"
    title="CSS 2D Transforms">CSS 2D Transforms</a> and <a
    href="http://www.w3.org/TR/css3-3d-transforms/"
    title="CSS 3D Transforms Module Level 3">CSS 3D Transforms</a>
    specifications, as well as <a href="http://www.w3.org/TR/SVG-Transforms/"
    title="SVG Transforms 1.0">SVG Transforms</a>.
   <p> The <a href=ChangeLog>list of changes made to this specification</a> is
    available.
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
    <li><a href="#module-interactions"><span class=secno>2. </span>Module
     Interactions</a>
    <li><a href="#css-values"><span class=secno>3. </span>CSS Values</a>
    <li><a href="#definitions"><span class=secno>4. </span>Definitions</a>
    <li><a href="#two-dimensional-subset"><span class=secno>5. </span> Two
     Dimensional Subset </a>
    <li><a href="#transform-rendering"><span class=secno>6. </span>The
     Transform Rendering Model</a>
     <ul class=toc>
      <li><a href="#transform-3d-rendering"><span class=secno>6.1. </span>3D
       Transform Rendering</a>
      <li><a href="#processing-of-perspective-transformed-boxes"><span
       class=secno>6.2. </span> Processing of Perspective-Transformed Boxes
       </a>
     </ul>
    <li><a href="#transform-property"><span class=secno>7. </span> The
     ‘<code class=property>transform</code>’ Property </a>
    <li><a href="#transform-origin-property"><span class=secno>8. </span> The
     ‘<code class=property>transform-origin</code>’ Property </a>
    <li><a href="#transform-style-property"><span class=secno>9. </span> The
     ‘<code class=property>transform-style</code>’ Property </a>
    <li><a href="#perspective-property"><span class=secno>10. </span> The
     ‘<code class=property>perspective</code>’ Property </a>
    <li><a href="#perspective-origin-property"><span class=secno>11. </span>
     The ‘<code class=property>perspective-origin</code>’ Property </a>
    <li><a href="#backface-visibility-property"><span class=secno>12. </span>
     The ‘<code class=property>backface-visibility</code>’ Property </a>
    <li><a href="#svg-transform"><span class=secno>13. </span> The SVG
     ‘<code class=property>transform</code>’ Attribute </a>
     <ul class=toc>
      <li><a href="#transform-attribute-specificity"><span class=secno>13.1.
       </span> SVG ‘<code class=property>transform</code>’ attribute
       specificity </a>
      <li><a href="#svg-syntax"><span class=secno>13.2. </span> Syntax of the
       SVG ‘<code class=property>transform</code>’ attribute </a>
       <ul class=toc>
        <li><a href="#svg-transform-list"><span class=secno>13.2.1. </span>
         Transform List </a>
        <li><a href="#svg-functional-notation"><span class=secno>13.2.2.
         </span> Functional Notation </a>
        <li><a href="#svg-data-types"><span class=secno>13.2.3. </span> SVG
         Data Types </a>
         <ul class=toc>
          <li><a href="#svg-transform-value"><span class=secno>13.2.3.1.
           </span> The <var>&lt;translation-value&gt;</var> and
           <var>&lt;length&gt;</var> type </a>
          <li><a href="#svg-angle"><span class=secno>13.2.3.2. </span> The
           <var>&lt;angle&gt;</var> type </a>
          <li><a href="#svg-number"><span class=secno>13.2.3.3. </span> The
           <var>&lt;number&gt;</var> type </a>
         </ul>
       </ul>
      <li><a href="#svg-gradient-transform-pattern-transform"><span
       class=secno>13.3. </span> The SVG ‘<code
       class=property>gradientTransform</code>’ and ‘<code
       class=property>patternTransform</code>’ attributes </a>
      <li><a href="#svg-transform-functions"><span class=secno>13.4. </span>
       SVG transform functions </a>
      <li><a href="#svg-three-dimensional-functions"><span class=secno>13.5.
       </span>SVG and 3D transform functions</a>
      <li><a href="#svg-user-coordinate-space"><span class=secno>13.6. </span>
       User coordinate space </a>
      <li><a href="#transform-attribute-dom"><span class=secno>13.7. </span>
       SVG DOM interface for the ‘<code class=property>transform</code>’
       attribute </a>
     </ul>
    <li><a href="#svg-animation"><span class=secno>14. </span> SVG Animation
     </a>
     <ul class=toc>
      <li><a href="#svg-animate-element"><span class=secno>14.1. </span> The
       ‘<code class=property>animate</code>’ and ‘<code
       class=property>set</code>’ element </a>
      <li><a href="#neutral-element"><span class=secno>14.2. </span> Neutral
       element for addition </a>
      <li><a href="#svg-attribute-name"><span class=secno>14.3. </span> The
       SVG ‘<code class=property>attributeName</code>’ attribute </a>
     </ul>
    <li><a href="#transform-functions"><span class=secno>15. </span> The
     Transform Functions </a>
     <ul class=toc>
      <li><a href="#two-d-transform-functions"><span class=secno>15.1.
       </span>2D Transform Functions</a>
      <li><a href="#three-d-transform-functions"><span class=secno>15.2.
       </span>3D Transform Functions</a>
     </ul>
    <li><a href="#transform-function-lists"><span class=secno>16. </span> The
     Transform Function Lists </a>
    <li><a href="#animation"><span class=secno>17. </span> Interpolation of
     Transforms </a>
    <li><a href="#transform-primitives"><span class=secno>18. </span>
     Transform function primitives and derivatives </a>
    <li><a href="#interpolation-of-transform-functions"><span class=secno>19.
     </span> Interpolation of primitives and derived transform functions </a>
    <li><a href="#matrix-interpolation"><span class=secno>20. </span>
     Interpolation of Matrices </a>
     <ul class=toc>
      <li><a href="#matrix-decomposing"><span class=secno>20.1.
       </span>Decomposing the Matrix</a>
      <li><a href="#matrix-values-interpolation"><span class=secno>20.2.
       </span> Interpolation of decomposed matrix values </a>
      <li><a href="#matrix-recomposing"><span class=secno>20.3. </span>
       Recomposing the Matrix </a>
     </ul>
    <li><a href="#mathematical-description"><span class=secno>21. </span>
     Mathematical Description of Transform Functions </a>
    <li><a href="#references"><span class=secno>22. </span>References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
      <li class=no-num><a href="#other-references">Other references</a>
     </ul>
    <li class=no-num><a href="#property-index">Property index</a>
    <li class=no-num><a href="#index">Index</a>
   </ul>
   <!--end-toc-->
   <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
   <p><em>This section is not normative.</em>
   <p> The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual
    formatting model</a> describes a coordinate system within each element is
    positioned. Positions and sizes in this coordinate space can be thought of
    as being expressed in pixels, starting in the origin of point with
    positive values proceeding to the right and down.
   <p> This coordinate space can be modified with the ‘<a
    href="#effects"><code class=property>transform</code></a>’ property.
    Using transform, elements can be translated, rotated and scaled in two or
    three dimensional space.
   <p> Additional properties make working with transforms easier, and allow
    the author to control how nested three-dimensional transforms interact.
   <ul>
    <li> The ‘<a href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property provides a
     convenient way to control the origin about which transforms on an element
     are applied.
    <li> The ‘<a href="#perspective"><code
     class=property>perspective</code></a>’ property allows the author to
     make child elements with three-dimensional transforms appear as if they
     live in a common three-dimensional space. The ‘<a
     href="#perspective-origin"><code
     class=property>perspective-origin</code></a>’ property provides control
     over the origin at which perspective is applied, effectively changing the
     location of the "vanishing point".
    <li> The ‘<a href="#transform-style"><code
     class=property>transform-style</code></a>’ property allows
 D-transformed elements and their 3D-transformed descendants to share a
     common three-dimensional space, allowing the construction of hierarchies
     of three-dimensional objects.
    <li> The ‘<a href="#backface-visibility"><code
     class=property>backface-visibility</code></a>’ property comes into play
     when an element is flipped around via three-dimensional transforms such
     that its reverse side is visible to the viewer. In some situations it is
     desirable to hide the element in this situation, which is possible using
     the value of ‘<code class=css>hidden</code>’ for this property.
   </ul>
   <p> Note that while some values of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ property allow an element to be
    transformed in a three-dimensional coordinate system, the elements
    themselves are not three-dimensional objects. Instead, they exist on a
    two-dimensional plane (a flat surface) and have no depth.</p>
   <!-- ======================================================================================================= -->
   <h2 id=module-interactions><span class=secno>2. </span>Module Interactions</h2>
   <p>This module defines a set of CSS properties that affect the visual
    rendering of elements to which those properties are applied; these effects
    are applied after elements have been sized and positioned according to the
    <a href="http://www.w3.org/TR/CSS2/visuren.html"
    title="Visual formatting model">Visual formatting model</a> from <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of
    these properties result in the creation of a <a
    href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"
    title="Visual formatting model">containing block</a>, and/or the creation
    of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
    title="Visual formatting model">stacking context</a>.
   <p> Three-dimensional transforms can also affect the visual layering of
    elements, and thus override the back-to-front painting order described in
    <a href="http://www.w3.org/TR/CSS2/zindex.html"
    title="Elaborate description of Stacking Contexts">Appendix E</a> of <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
   <p> Transforms affect the rendering of backgounds on elements with a value
    of ‘<code class=css>fixed</code>’ for the ‘<code class=css><code
    class=property><a
    href="http://www.w3.org/TR/css3-background/#the-background-attachment">background-attachment</a></code></code>’
    property, which is specified in <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
   <h2 id=css-values><span class=secno>3. </span>CSS Values</h2>
   <p>This specification follows the <a
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
    definition conventions</a> from <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
    this specification are defined in CSS Level 2 Revision 1 <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
   <p>In addition to the property-specific values listed in their definitions,
    all properties defined in this specification also accept the <a
    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
    keyword as their property value. For readability it has not been repeated
    explicitly.
   <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
   <p> When used in this specification, terms have the meanings assigned in
    this section.
   <dl>
    <dt id=TermBoundingBox><dfn id=bounding-box>bounding box</dfn>
    <dd>
     <p> A bounding box is the object bounding box for all SVG elements
      without an associated CSS layout box and the border box for all other
      elements. The bounding box of a table is the border box of its <a
      href="http://www.w3.org/TR/CSS21/tables.html#model">table wrapper
      box</a>, not its table box.
    <dt id=TermTransformableElement><dfn
     id=transformable-element>transformable element</dfn>
    <dd>
     <p> A transformable element is an element in one of these categories:
     <ul>
      <li> an element whose layout is governed by the CSS box model which is
       either a <a
       href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
       or <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic
       inline-level element</a>, or whose ‘<code
       class=property>display</code>’ property computes to ‘<code
       class=css>table-row</code>’, ‘<code
       class=css>table-row-group</code>’, ‘<code
       class=css>table-header-group</code>’, ‘<code
       class=css>table-footer-group</code>’, ‘<code
       class=css>table-cell</code>’, or ‘<code
       class=css>table-caption</code>’ <a href="#CSS21"
       rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
      <li> an element in the SVG namespace and not governed by the CSS box
       model which has the attributes ‘<a href="#effects"><code
       class=property>transform</code></a>’, ‘<code
       class=property>patternTransform</code>’ or ‘<code
       class=property>gradientTransform</code>’ <a href="#SVG11"
       rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>
     </ul>
    <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
     coordinate system</dfn>
    <dd>
     <p> In general, a coordinate system defines locations and distances on
      the current canvas. The current local coordinate system (also user
      coordinate system) is the coordinate system that is currently active and
      which is used to define how coordinates and lengths are located and
      computed, respectively, on the current canvas.
    <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
     coordinate system</dfn>
    <dd>
     <p> See definition of <a class=term href="#local-coordinate-system">local
      coordinate system</a>.
    <dt id=TermPerspectiveMatrix><dfn id=perspective-matrix>perspective
     matrix</dfn>
    <dd>
     <p> A matrix computed from the values of the ‘<a
      href="#perspective"><code class=property>perspective</code></a>’ and
      ‘<a href="#perspective-origin"><code
      class=property>perspective-origin</code></a>’ properties as described
      <a href="#perspective-matrix-computation">below</a>.
    <dt id=TermTransformationMatrix><dfn
     id=transformation-matrix>transformation matrix</dfn>
    <dd>
     <p> A matrix that defines the mathematical mapping from one coordinate
      system into another. It is computed from the values of the ‘<a
      href="#effects"><code class=property>transform</code></a>’ and ‘<a
      href="#transform-origin"><code
      class=property>transform-origin</code></a>’ properties as described <a
      href="#transformation-matrix-computation">below</a>.
    <dt id=TermCurrentTransformationMatrix><dfn
     id=current-transformation-matrix-ctm>current transformation matrix
     (CTM)</dfn>
    <dd>
     <p> A matrix that defines the mapping from the local coordinate system
      into the viewport coordinate system.
    <dt id=TermAccumulated3DTransformationMatrix> <dfn
     id=accumulated-3d-transformation-matrix>accumulated 3D transformation
     matrix</dfn>
    <dd>
     <p> A matrix computed for elements in a <a href="#d-rendering-context">3D
      rendering context</a>, as described <a
      href="#accumulated-3d-transformation-matrix-computation">below</a>.
    <dt id=TermIdentityTransformFunction> <dfn
     id=identity-transform-function>identity transform function</dfn>
    <dd>
     <p> A <a href="#transform-functions">transform function</a> that is
      equivalent to a identity 4x4 matrix (see <a
      href="#mathematical-description">Mathematical Description of Transform
      Functions</a>). Examples for identity transform functions are ‘<code
      class=css>translate(0)</code>’, ‘<code class=css>translate3d(0, 0,
 )</code>’, ‘<code class=css>translateX(0)</code>’, ‘<code
      class=css>translateY(0)</code>’, ‘<code
      class=css>translateZ(0)</code>’, ‘<code
      class=css>scale(1)</code>’, ‘<code class=css>scaleX(1)</code>’,
      ‘<code class=css>scaleY(1)</code>’, ‘<code
      class=css>scaleZ(1)</code>’, ‘<code class=css>rotate(0)</code>’,
      ‘<code class=css>rotate3d(1, 1, 1, 0)</code>’, ‘<code
      class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,
      ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,
 )</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code
      class=css>skewY(0)</code>’, ‘<code class=css>matrix(1, 0, 0, 1, 0,
 )</code>’ and ‘<code class=css>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0,
 , 1, 0, 0, 0, 0, 1)</code>’. A special case is perspective: ‘<code
      class=css>perspective(infinity)</code>’. The value of m<sub>34</sub>
      becomes infinitesimal small and the transform function is therefore
      assumed to be equal to the identity matrix.
    <dt id=Term3DRenderingContext><dfn id=d-rendering-context>3D rendering
     context</dfn>
    <dd>
     <p> A containing block hierarchy of one or more levels, instantiated by
      elements with a computed value for the ‘<a
      href="#transform-style"><code
      class=property>transform-style</code></a>’ property of ‘<code
      class=css>preserve-3d</code>’, whose elements share a common
      three-dimensional coordinate system.
   </dl>
   <!-- ======================================================================================================= -->
   <h2 id=two-dimensional-subset><span class=secno>5. </span> Two Dimensional
    Subset</h2>
   <p> UAs may not always be able to render three-dimensional transforms and
    then just support a two-dimensional subset of this specification. In this
    case <a href="#three-d-transform-functions">three-dimensional
    transforms</a> and the properties ‘<a href="#transform-style"><code
    class=property>transform-style</code></a>’, ‘<a
    href="#perspective"><code class=property>perspective</code></a>’, ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ and ‘<a
    href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ must not be supported.
    Section <a href="#transform-3d-rendering">3D Transform Rendering</a> does
    not apply. Matrix decomposing uses the technique taken from the "unmatrix"
    method in "Graphics Gems II, edited by Jim Arvo", simplified for the 2D
    case. Section <a href="#mathematical-description">Mathematical Description
    of Transform Functions</a> is still effective but can be reduced by using
    a 3x3 transformation matrix where <em>a</em> equals
    <em>m<sub>11</sub></em>, <em>b</em> equals <em>m<sub>12</sub></em>,
    <em>c</em> equals <em>m<sub>21</sub></em>, <em>d</em> equals
    <em>m<sub>22</sub></em>, <em>e</em> equals <em>m<sub>41</sub></em> and
    <em>f</em> equals <em>m<sub>42</sub></em> (see <a href="#MatrixDefined">A
 D 3x2 matrix with six parameter</a>).
   <div class=figure> <img alt="3x3 matrix" height=79 src=3x3matrix.png
    title="\begin{bmatrix} a & c & e \\ b             & d & f \\ 0 & 0 & 1 \end{bmatrix}"
    width=82>
    <p class=caption> 3x3 matrix for two-dimensional transformations.
   </div>
   <div class=example>
    <p> Authors can easily provide a fallback if UAs do not provide support
     for three-dimensional transforms. The following example has two property
     definitions for ‘<a href="#effects"><code
     class=property>transform</code></a>’. The first one consists of two
     two-dimensional transform functions. The second one has a two-dimensional
     and a three-dimensional transform function.
    <pre>div {
     transform: scale(2) rotate(45deg);
     transform: scale(2) rotate3d(0, 0, 1, 45deg);
 }</pre>
    <p> With 3D support, the second definition will override the first one.
     Without 3D support, the second definition is invalid and a UA falls back
     to the first definition.
   </div>
   <!-- ======================================================================================================= -->
   <h2 id=transform-rendering><span class=secno>6. </span>The Transform
    Rendering Model</h2>
   <p><em>This section is normative.</em>
   <p> Specifying a value other than ‘<code class=css>none</code>’ for the
    ‘<a href="#effects"><code class=css>transform</code></a>’ property
    establishes a new <a class=term href="#local-coordinate-system">local
    coordinate system</a> at the element that it is applied to. The mapping
    from where the element would have rendered into that local coordinate
    system is given by the element's <a class=term
    href="#transformation-matrix">transformation matrix</a>. Transformations
    are cumulative. That is, elements establish their local coordinate system
    within the coordinate system of their parent. From the perspective of the
    user, an element effectively accumulates all the ‘<a
    href="#effects"><code class=property>transform</code></a>’ properties of
    its ancestors as well as any local transform applied to it. The
    accumulation of these transforms defines a <a class=term
    href="#current-transformation-matrix-ctm">current transformation matrix
    (CTM)</a> for the element.
   <p> The coordinate space is a coordinate system with two axes: the X axis
    increases horizontally to the right; the Y axis increases vertically
    downwards. Three-dimensional transform functions extend this coordinate
    space into three dimensions, adding a Z axis perpendicular to the plane of
    the screen, that increases towards the viewer.
   <div class=figure> <img alt="Demonstration of the initial coordinate space"
    height=240 src=coordinates.svg width=270>
    <p class=caption> Demonstration of the initial coordinate space.
   </div>
   <p id=transformation-matrix-computation> The <a class=term
    href="#transformation-matrix">transformation matrix</a> is computed from
    the ‘<a href="#effects"><code class=property>transform</code></a>’ and
    ‘<a href="#transform-origin"><code
    class=property>transform-origin</code></a>’ properties as follows:
   <ol>
    <li>Start with the identity matrix.
    <li>Translate by the computed X, Y and Z values of ‘<a
     href="#transform-origin"><code
     class=property>transform-origin</code></a>’
    <li>Multiply by each of the transform functions in ‘<a
     href="#effects"><code class=property>transform</code></a>’ property
     from left to right
    <li>Translate by the negated computed X, Y and Z values of ‘<a
     href="#transform-origin"><code
     class=property>transform-origin</code></a>’
   </ol>
   <p> Transforms apply to <a class=term
    href="#transformable-element">transformable elements</a>.
   <div class=example>
    <pre>
 div {
     transform: translate(100px, 100px);
 }
 </pre>
    <p>This transform moves the element by 100 pixels in both the X and Y
     directions.
    <div class=figure> <img alt="The 100px translation in X and Y" height=250
     src="examples/translate1.svg" width=470></div>
   </div>
   <div class=example>
    <pre>div {
     height: 100px; width: 100px;
     transform-origin: 50px 50px;
     transform: rotate(45deg);
 }</pre>
    <p> The ‘<a href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property moves the point of
     origin by 50 pixels in both the X and Y directions. The transform rotates
     the element clockwise by 45° about the point of origin. After all
     transform functions were applied, the translation of the origin gets
     translated back by -50 pixels in both the X and Y directions.
    <div class=figure> <img
     alt="The point of origin gets translated temporary" height=250
     src="examples/origin1.svg" width=735></div>
   </div>
   <div class=example>
    <pre>
 div {
     height: 100px; width: 100px;
     transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
 }
 </pre>
    <p> This transform moves the element by 80 pixels in both the X and Y
     directions, then scales the element by 150%, then rotates it 45°
     clockwise about the Z axis. Note that the scale and rotation operate
     about the center of the element, since the element has the default
     transform-origin of ‘<code class=css>50% 50%</code>’.
    <div class=figure> <img alt="The transform specified above" height=270
     src="examples/compound_transform.svg" width=270></div>
    <p> Note that an identical rendering can be obtained by nesting elements
     with the equivalent transforms:
    <pre>
 &lt;div style="transform: translate(80px, 80px)"&gt;
     &lt;div style="transform: scale(1.5, 1.5)"&gt;
         &lt;div style="transform: rotate(45deg)"&gt;&lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;</pre>
   </div>
   <p> For elements whose layout is governed by the CSS box model, the
    transform property does not affect the flow of the content surrounding the
    transformed element. However, the extent of the overflow area takes into
    account transformed elements. This behavior is similar to what happens
    when elements are offset via relative positioning. Therefore, if the value
    of the ‘<code class=property>overflow</code>’ property is ‘<code
    class=css>scroll</code>’ or ‘<code class=css>auto</code>’,
    scrollbars will appear as needed to see content that is transformed
    outside the visible area.
   <p> For elements whose layout is governed by the CSS box model, any value
    other than ‘<code class=css>none</code>’ for the transform results in
    the creation of both a stacking context and a containing block. The object
    acts as a containing block for fixed positioned descendants.
   <p class=issue> Is this effect on position:fixed necessary? If so, need to
    go into more detail here about why fixed positioned objects should do
    this, i.e., that it's much harder to implement otherwise. See <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>.
   <p> <a href="http://www.w3.org/TR/css3-background/#fixed0">Fixed
    backgrounds</a> on the root element are affected by any transform
    specified for that element. For all other elements that are effected by a
    transform (i.e. have a transform applied to them, or to any of their
    ancestor elements), a value of ‘<code class=css>fixed</code>’ for the
    ‘<code class=property>background-attachment</code>’ property is
    treated as if it had a value of ‘<code class=css>scroll</code>’. The
    computed value of ‘<code class=property>background-attachment</code>’
    is not affected.
   <p class=note> If the root element is transformed, the transformation
    applies to the entire canvas, including any background specified for the
    root element. Since <a
    href="http://www.w3.org/TR/css3-background/#special-backgrounds"> the
    background painting area for the root element</a> is the entire canvas,
    which is infinite, the transformation might cause parts of the background
    that were originally off-screen to appear. For example, if the root
    element's background were repeating dots, and a transformation of ‘<code
    class=css>scale(0.5)</code>’ were specified on the root element, the
    dots would shrink to half their size, but there will be twice as many, so
    they still cover the whole viewport.
   <h3 id=transform-3d-rendering><span class=secno>6.1. </span>3D Transform
    Rendering</h3>
   <p> Normally, elements render as flat planes, and are rendered into the
    same plane as their containing block. Often this is the plane shared by
    the rest of the page. Two-dimensional transform functions can alter the
    appearance of an element, but that element is still rendered into the same
    plane as its containing block.
   <p> Three-dimensional transforms can result in transformation matrices with
    a non-zero Z component (where the Z axis projects out of the plane of the
    screen). This can result in an element rendering on a different plane than
    that of its containing block. This may affect the front-to-back rendering
    order of that element relative to other elements, as well as causing it to
    intersect with other elements. This behavior depends on whether the
    element is a member of a <a class=term href="#d-rendering-context">3D
    rendering context</a>, as described below.
   <div class=issue>
    <p class=desc>This description does not exactly match what WebKit
     implements. Perhaps it should be changed to match current
     implementations? See <a
     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19637">Bug
 </a>.
   </div>
   <div class=example>
    <p>This example shows the effect of three-dimensional transform applied to
     an element.
    <pre>
 &lt;style&gt;
 div {
     height: 150px;
     width: 150px;
 }
 .container {
     border: 1px solid black;
 }
 .transformed {
     transform: rotateY(50deg);
 }
 &lt;/style&gt;
 &lt;div class="container"&gt;
     &lt;div class="transformed"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
    <div class=figure> <img alt="Div with a rotateY transform." height=190
     src="examples/simple-3d-example.png" width=210></div>
    <p>The transform is a 50° rotation about the vertical, Y axis. Note how
     this makes the blue box appear narrower, but not three-dimensional.
   </div>
   <p> The ‘<a href="#perspective"><code
    class=property>perspective</code></a>’ and ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ properties can be used to
    add a feeling of depth to a scene by making elements higher on the Z axis
    (closer to the viewer) appear larger, and those further away to appear
    smaller. The scaling is proportional to <var>d</var>/(<var>d</var> −
    <var>Z</var>) where <var>d</var>, the value of ‘<a
    href="#perspective"><code class=property>perspective</code></a>’, is the
    distance from the drawing plane to the the assumed position of the
    viewer's eye.
   <div class=figure> <img alt="Diagram of scale vs. Z position"
    src="perspective_distance.png">
    <p class=caption> Diagrams showing how scaling depends on the ‘<a
     href="#perspective"><code class=property>perspective</code></a>’
     property and Z position. In the top diagram, <var>Z</var> is half of
     <var>d</var>. In order to make it appear that the original circle (solid
     outline) appears at <var>Z</var> (dashed circle), the circle is scaled up
     by a factor of two, resulting in the light blue circle. In the bottom
     diagram, the circle is scaled down by a factor of one-third to make it
     appear behind the original position.
   </div>
   <p> Normally the assumed position of the viewer's eye is centered on a
    drawing. This position can be moved if desired – for example, if a web
    page contains multiple drawings that should share a common perspective –
    by setting ‘<a href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’.
   <div class=figure> <img alt="Diagram of different perspective-origin"
    src="perspective_origin.png">
    <p class=caption> Diagram showing the effect of moving the perspective
     origin upward.
   </div>
   <p id=perspective-matrix-computation> The <a
    href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as
    follows:
   <ol>
    <li>Start with the identity matrix.
    <li>Translate by the computed X and Y values of ‘<a
     href="#perspective-origin"><code
     class=property>perspective-origin</code></a>’
    <li>Multiply by the matrix that would be obtained from the ‘<code
     class=css><a href="#perspective-function"><code
     class=css>perspective(&lt;length&gt;)</code></a></code>’ transform
     function, where the length is provided by the value of the ‘<a
     href="#perspective"><code class=property>perspective</code></a>’
     property
    <li>Translate by the negated computed X and Y values of ‘<a
     href="#perspective-origin"><code
     class=property>perspective-origin</code></a>’
   </ol>
   <div class=example>
    <p>This example shows how perspective can be used to cause
     three-dimensional transforms to appear more realistic.
    <pre>
 &lt;style&gt;
 div {
     height: 150px;
     width: 150px;
 }
 .container {
     perspective: 500px;
     border: 1px solid black;
 }
 .transformed {
     transform: rotateY(50deg);
 }
 &lt;/style&gt;
 &lt;div class="container"&gt;
     &lt;div class="transformed"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
    <div class=figure> <img
     alt="Div with a rotateY transform,                     and perspective on its container"
     height=190 src="examples/simple-perspective-example.png" width=210></div>
    <p>The inner element has the same transform as in the previous example,
     but its rendering is now influenced by the perspective property on its
     parent element. Perspective causes vertices that have positive Z
     coordinates (closer to the viewer) to be scaled up in X and Y, and those
     further away (negative Z coordinates) to be scaled down, giving an
     appearance of depth.
   </div>
   <p> An element with a three-dimensional transform that is not contained in
    a <a class=term href="#d-rendering-context">3D rendering context</a>
    renders with the appropriate transform applied, but does not intersect
    with any other elements. The three-dimensional transform in this case can
    be considered just as a painting effect, like two-dimensional transforms.
    Similarly, the transform does not affect painting order. For example, a
    transform with a positive Z translation may make an element look larger,
    but does not cause that element to render in front of elements with no
    translation in Z.
   <p> An element with a three-dimensional transform that is contained in a <a
    class=term href="#d-rendering-context">3D rendering context</a> can
    visibly interact with other elements in that same 3D rendering context;
    the set of elements participating in the same <a class=term
    href="#d-rendering-context">3D rendering context</a> may obscure each
    other or intersect, based on their computed transforms. They are rendered
    as if they are all siblings, positioned in a common 3D coordinate space.
    The position of each element in that three-dimensional space is determined
    by accumulating the transformation matrices up from the element that
    establishes the <a class=term href="#d-rendering-context">3D rendering
    context</a> through each element that is a containing block for the given
    element, as described below.
   <div class=example>
    <pre>
 &lt;style&gt;
 div {
     height: 150px;
     width: 150px;
 }
 .container {
     perspective: 500px;
     border: 1px solid black;
 }
 .transformed {
     transform: rotateY(50deg);
     background-color: blue;
 }
 .child {
     transform-origin: top left;
     transform: rotateX(40deg);
     background-color: lime;
 }
 &lt;/style&gt;
 &lt;div class="container"&gt;
     &lt;div class="transformed"&gt;
         &lt;div class="child"&gt;&lt;/div&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 </pre>
    <p>This example shows how nested 3D transforms are rendered in the absence
     of ‘<code class=css>transform-style: preserve-3d</code>’. The blue
     div is transformed as in the previous example, with its rendering
     influenced by the perspective on its parent element. The lime element
     also has a 3D transform, which is a rotation about the X axis (anchored
     at the top, by virtue of the transform-origin). However, the lime element
     is being rendered into the plane of its parent because it is not a member
     of a 3D rendering context; the parent is "flattening".
    <div class=figure> <img alt="Nested 3D transforms, with flattening"
     height=200 src="examples/3d-rendering-context-flat.png" width=240></div>
   </div>
   <p>Elements establish and participate in 3D rendering contexts as follows:
   <ul>
    <li> A <a class=term href="#d-rendering-context">3D rendering context</a>
     is established by a a <a class=term
     href="#transformable-element">transformable element</a> whose computed
     value for ‘<a href="#transform-style"><code
     class=property>transform-style</code></a>’ is ‘<code
     class=css>preserve-3d</code>’, and which itself is not part of a 3D
     rendering context. Note that such an element is always a containing
     block. An element that establishes a 3D rendering context also
     participates in that context.
    <li> An element whose computed value for ‘<a
     href="#transform-style"><code
     class=property>transform-style</code></a>’ is ‘<code
     class=css>preserve-3d</code>’, and which itself participates in a <a
     class=term href="#d-rendering-context">3D rendering context</a>, extends
     that 3D rendering context rather than establishing a new one.
    <li> An element participates in a <a class=term
     href="#d-rendering-context">3D rendering context</a> if its containing
     block establishes or extends a <a class=term
     href="#d-rendering-context">3D rendering context</a>.
   </ul>
   <p id=accumulated-3d-transformation-matrix-computation> The final value of
    the transform used to render an element in a <a class=term
    href="#d-rendering-context">3D rendering context</a> is computed by
    accumulating an <a href="#TermAccumulated3DTransformationMatrix">
    accumulated 3D transformation matrix</a> as follows:
   <ol>
    <li>Start with the identity matrix.
    <li>For each containing block between the root of the <a class=term
     href="#d-rendering-context">3D rendering context</a> and the element in
     question:
     <ol>
      <li>multiply the accumulated matrix with the <a class=term
       href="#perspective-matrix">perspective matrix</a> on the element's
       containing block (if any). That containing block is not necessarily a
       member of the 3D rendering context.
      <li>apply to the accumulated matrix a translation equivalent to the
       horizontal and vertical offset of the element relative to its
       containing block as specified by the CSS visual formatting model.
      <li>multiply the accumulated matrix with the <a class=term
       href="#transformation-matrix">transformation matrix</a>.
     </ol>
   </ol>
   <div class=example>
    <pre>
 &lt;style&gt;
 div {
     height: 150px;
     width: 150px;
 }
 .container {
     perspective: 500px;
     border: 1px solid black;
 }
 .transformed {
     <b>transform-style: preserve-3d</b>;
     transform: rotateY(50deg);
     background-color: blue;
 }
 .child {
     transform-origin: top left;
     transform: rotateX(40deg);
     background-color: lime;
 }
 &lt;/style&gt;
 </pre>
    <p> This example is identical to the previous example, with the addition
     of ‘<code class=css>transform-style: preserve-3d</code>’ on the blue
     element. The blue element now establishes a 3D rendering context, of
     which the lime element is a member. Now both blue and lime elements share
     a common three-dimensional space, so the lime element renders as tilting
     out from its parent, influenced by the perspective on the container.
    <div class=figure> <img alt="Nested 3D transforms, with preserve-3d."
     height=200 src="examples/3d-rendering-context-3d.png" width=240></div>
   </div>
   <p> Elements in the same <a class=term href="#d-rendering-context">3D
    rendering context</a> may intersect with each other. User agents must
    render intersection by subdividing the planes of intersecting elements as
    described by <a
    href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's
    algorithm</a>.
   <p> Untransformed elements in a <a class=term
    href="#d-rendering-context">3D rendering context</a> render on the Z=0
    plane, yet may still intersect with transformed elements.
   <p> Within a <a class=term href="#d-rendering-context">3D rendering
    context</a>, the rendering order of non-intersecting elements is based on
    their position on the Z axis after the application of the accumulated
    transform. Elements at the same Z position render in <a
    href="http://www.w3.org/TR/CSS2/zindex.html#painting-order">stacking
    context order</a>.
   <div class=example>
    <pre>
 &lt;style&gt;
 .container {
     background-color: rgba(0, 0, 0, 0.3);
     transform-style: preserve-3d;
     perspective: 500px;
 }
 .container > div {
     position: absolute;
     left: 0;
 }
 .container > :first-child {
     transform: rotateY(45deg);
     background-color: orange;
     top: 10px;
     height: 135px;
 }
 .container > :last-child {
     transform: translateZ(40px);
     background-color: rgba(0, 0, 255, 0.75);
     top: 50px;
     height: 100px;
 }
 &lt;/style&gt;
 &lt;div class="container"&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
    <p> This example shows show elements in a 3D rendering context can
     intersect. The container element establishes a 3D rendering context for
     itself and its two children. The children intersect with eachother, and
     the orange element also intersects with the container.
    <div class=figure> <img alt="Intersecting sibling elements." height=200
     src="examples/3d-intersection.png" width=200></div>
   </div>
   <p> Using three-dimensional transforms, it's possible to transform an
    element such that its reverse side is towards the viewer. 3D-transformed
    elements show the same content on both sides, so the reverse side looks
    like a mirror-image of the front side (as if the element were projected
    onto a sheet of glass). Normally, elements whose reverse side is towards
    the viewer remain visible. However, the ‘<a
    href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ property allows the
    author to make an element invisible when its reverse side is towards the
    viewer. This behavior is "live"; if an element with ‘<code
    class=css>backface-visibility: hidden</code>’ were animating, such that
    its front and reverse sides were alternately visible, then it would only
    be visible when the front side were towards the viewer.
   <h3 id=processing-of-perspective-transformed-boxes><span class=secno>6.2.
    </span> Processing of Perspective-Transformed Boxes</h3>
   <div class=issue>
    <p class=desc> This is a first pass at an attempt to precisely specify how
     exactly to transform elements using the provided matrices. It might not
     be ideal, and implementer feedback is encouraged. See <a
     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15605">bug
 </a>.
   </div>
   <p> The <a class=term
    href="#accumulated-3d-transformation-matrix">accumulated 3D transformation
    matrix</a> is a 4×4 matrix, while the objects to be transformed are
    two-dimensional boxes. To transform each corner (<var>a</var>,
    <var>b</var>) of a box, the matrix must first be applied to (<var>a</var>,
    <var>b</var>, 0, 1), which will result in a four-dimensional point
    (<var>x</var>, <var>y</var>, <var>z</var>, <var>w</var>). This is
    transformed back to a three-dimensional point (<var>x</var>′,
    <var>y</var>′, <var>z</var>′) as follows:
   <p> If <var>w</var> &gt; 0, (<var>x</var>′, <var>y</var>′,
    <var>z</var>′) = (<var>x</var>/<var>w</var>, <var>y</var>/<var>w</var>,
    <var>z</var>/<var>w</var>).
   <p> If <var>w</var> = 0, (<var>x</var>′, <var>y</var>′,
    <var>z</var>′) = (<var>x</var> ⋅ <var>n</var>, <var>y</var> ⋅
    <var>n</var>, <var>z</var> ⋅ <var>n</var>). <var>n</var> is an
    implementation-dependent value that should be chosen so that
    <var>x</var>′ or <var>y</var>′ is much larger than the viewport size,
    if possible. For example, (5px, 22px, 0px, 0) might become (5000px,
 px, 0px), with <var>n</var> = 1000, but this value of <var>n</var>
    would be too small for (0.1px, 0.05px, 0px, 0). This specification does
    not define the value of <var>n</var> exactly. Conceptually,
    (<var>x</var>′, <var>y</var>′, <var>z</var>′) is <a
    href="http://en.wikipedia.org/wiki/Plane_at_infinity">infinitely far</a>
    in the direction (<var>x</var>, <var>y</var>, <var>z</var>).
   <p> If <var>w</var> &lt; 0 for all four corners of the transformed box, the
    box is not rendered.
   <p> If <var>w</var> &lt; 0 for one to three corners of the transformed box,
    the box must be replaced by a polygon that has any parts with <var>w</var>
    &lt; 0 cut out. This will in general be a polygon with three to five
    vertices, of which exactly two will have <var>w</var> = 0 and the rest
    <var>w</var> &gt; 0. These vertices are then transformed to
    three-dimensional points using the rules just stated. Conceptually, a
    point with <var>w</var> &lt; 0 is "behind" the viewer, so should not be
    visible.
   <div class=example>
    <pre>&lt;style&gt;
 .transformed {
     height: 100px;
     width: 100px;
     background: lime;
     transform: perspective(50px) translateZ(100px);
 }
 &lt;/style&gt;</pre>
    <p> All of the box's corners have <var>z</var>-coordinates greater than
     the perspective. This means that the box is behind the viewer and will
     not display. Mathematically, the point (<var>x</var>, <var>y</var>) first
     becomes (<var>x</var>, <var>y</var>, 0, 1), then is translated to
     (<var>x</var>, <var>y</var>, 100, 1), and then applying the perspective
     results in (<var>x</var>, <var>y</var>, 100, −1). The
     <var>w</var>-coordinate is negative, so it does not display. An
     implementation that doesn't handle the <var>w</var> &lt; 0 case
     separately might incorrectly display this point as (−<var>x</var>,
     −<var>y</var>, −100), dividing by −1 and mirroring the box.
   </div>
   <div class=example>
    <pre>&lt;style&gt;
 .transformed {
     height: 100px;
     width: 100px;
     background: radial-gradient(yellow, blue);
     transform: perspective(50px) translateZ(50px);
 }
 &lt;/style&gt;</pre>
    <p> Here, the box is translated upward so that it sits at the same place
     the viewer is looking from. This is like bringing the box closer and
     closer to one's eye until it fills the entire field of vision. Since the
     default transform-origin is at the center of the box, which is yellow,
     the screen will be filled with yellow.
    <p> Mathematically, the point (<var>x</var>, <var>y</var>) first becomes
     (<var>x</var>, <var>y</var>, 0, 1), then is translated to (<var>x</var>,
     <var>y</var>, 50, 1), then becomes (<var>x</var>, <var>y</var>, 50, 0)
     after applying perspective. Relative to the transform-origin at the
     center, the upper-left corner was (−50, −50), so it becomes (−50,
     −50, 50, 0). This is transformed to something very far to the upper
     left, such as (−5000, −5000, 5000). Likewise the other corners are
     sent very far away. The radial gradient is stretched over the whole box,
     now enormous, so the part that's visible without scrolling should be the
     color of the middle pixel: yellow. However, since the box is not actually
     infinite, the user can still scroll to the edges to see the blue parts.
   </div>
   <div class=example>
    <pre>&lt;style&gt;
 .transformed {
     height: 50px;
     width: 50px;
     background: lime;
     border: 25px solid blue;
     transform-origin: left;
     transform: perspective(50px) rotateY(-45deg);
 }
 &lt;/style&gt;</pre>
    <p> The box will be rotated toward the viewer, with the left edge staying
     fixed while the right edge swings closer. The right edge will be at about
     <var>z</var> = 70.7px, which is closer than the perspective of 50px.
     Therefore, the rightmost edge will vanish ("behind" the viewer), and the
     visible part will stretch out infinitely far to the right.
    <p> Mathematically, the top right vertex of the box was originally (100,
     −50), relative to the transform-origin. It is first expanded to (100,
     −50, 0, 1). After applying the transform specified, this will get
     mapped to about (70.71, −50, 70.71, −0.4142). This has <var>w</var> =
     −0.4142 &lt; 0, so we need to slice away the part of the box with
     <var>w</var> &lt; 0. This results in the new top-right vertex being (50,
     −50, 50, 0). This is then mapped to some faraway point in the same
     direction, such as (5000, −5000, 5000), which is up and to the right
     from the transform-origin. Something similar is done to the lower right
     corner, which gets mapped far down and to the right. The resulting box
     stretches far past the edge of the screen.
    <p> Again, the rendered box is still finite, so the user can scroll to see
     the whole thing if he or she chooses. However, the right part has been
     chopped off. No matter how far the user scrolls, the rightmost 30px or so
     of the original box will not be visible. The blue border was only 25px
     wide, so it will be visible on the left, top, and bottom, but not the
     right.
    <p> The same basic procedure would apply if one or three vertices had
     <var>w</var> &lt; 0. However, in that case the result of truncating the
     <var>w</var> &lt; 0 part would be a triangle or pentagon instead of a
     quadrilateral.
   </div>
   <!-- ======================================================================================================= -->
   <h2 id=transform-property><span class=secno>7. </span> The ‘<a
    href="#effects"><code class=property>transform</code></a>’ Property</h2>
   <p> A transformation is applied to the coordinate system an element renders
    in through the ‘<a href="#effects"><code
    class=property>transform</code></a>’ property. This property contains a
    list of <a href="#transform-functions">transform functions</a>. The final
    transformation value for a coordinate system is obtained by converting
    each function in the list to its corresponding matrix like defined in <a
    href="#mathematical-description">Mathematical Description of Transform
    Functions</a>, then multiplying the matrices.
   <table class=propdef>
    <tbody>
     <tr>
      <td> <em>Name:</em>
      <td> <dfn id=effects>transform</dfn>
     <tr>
      <td> <em>Value:</em>
      <td> none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
     <tr>
      <td> <em>Initial:</em>
      <td> none
     <tr>
      <td> <em>Applies to:</em>
      <td> <a href="#TermTransformableElement">transformable elements</a>
     <tr>
      <td> <em>Inherited:</em>
      <td> no
     <tr>
      <td> <em>Percentages:</em>
      <td> refer to the size of <a href="#bounding-box"><var>bounding
       box</var></a>
     <tr>
      <td> <em>Media:</em>
      <td> visual
     <tr>
      <td> <em>Computed value:</em>
      <td> As specified, but with relative lengths converted into absolute
       lengths.
     <tr>
      <td> <em>Animatable:</em>
      <td> as <a href="#animation">transform</a>
   </table>
   <p> Any value other than ‘<code class=css>none</code>’ for the
    transform results in the creation of both a stacking context and a
    containing block. The object acts as a containing block for fixed
    positioned descendants.</p>
   <!-- ======================================================================================================= -->
   <h2 id=transform-origin-property><span class=secno>8. </span> The ‘<a
    href="#transform-origin"><code
    class=property>transform-origin</code></a>’ Property</h2>
   <table class=propdef>
    <tbody>
     <tr>
      <td> <em>Name:</em>
      <td> <dfn id=transform-origin>transform-origin</dfn>
     <tr>
      <td> <em>Value:</em>
      <td> [ &lt;percentage> | &lt;length> | left | center | right | top |
       bottom]<br>
       |<br>
       [<br>
         [ &lt;percentage> | &lt;length&gt; | left | center | right ]<br>
         &amp;&amp;<br>
         [ &lt;percentage> | &lt;length&gt; | top | center | bottom ]<br>
       ] &lt;length&gt;?<br>
     <tr>
      <td> <em>Initial:</em>
      <td> 50% 50%
     <tr>
      <td> <em>Applies to:</em>
      <td> <a href="#TermTransformableElement">transformable elements</a>
     <tr>
      <td> <em>Inherited:</em>
      <td> no
     <tr>
      <td> <em>Percentages:</em>
      <td> refer to the size of <a href="#bounding-box"><var>bounding
       box</var></a>
     <tr>
      <td> <em>Media:</em>
      <td> visual
     <tr>
      <td> <em>Computed value:</em>
      <td> For &lt;length&gt; the absolute value, otherwise a percentage
     <tr>
      <td> <em>Animatable:</em>
      <td> as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
       list</a> of <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
       percentage, or calc</a>
   </table>
   <p> The default value for SVG elements without associated CSS layout box is
    ‘<code class=css>0 0</code>’.
   <p> The values of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ and ‘<a
    href="#transform-origin"><code
    class=property>transform-origin</code></a>’ properties are used to
    compute the <a class=term href="#transformation-matrix">transformation
    matrix</a>, as described above.
   <p> If only one value is specified, the second value is assumed to be
    ‘<code class=css>center</code>’. If one or two values are specified,
    the third value is assumed to be ‘<code class=css>0px</code>’.
   <p> If two or more values are defined and either no value is a keyword, or
    the only used keyword is ‘<code class=css>center</code>’, then the
    first value represents the horizontal position (or offset) and the second
    represents the vertical position (or offset). A third value always
    represents the Z position (or offset) and must be of type
    <var>&lt;length&gt;</var>.
   <dl>
    <dt><var>&lt;percentage&gt;</var>
    <dd>
     <p>A percentage for the horizontal offset is relative to the width of the
      <a href="#bounding-box"><var>bounding box</var></a>. A percentage for
      the vertical offset is relative to height of the <a
      href="#bounding-box"><var>bounding box</var></a>. The value for the
      horizontal and vertical offset represent an offset from the top left
      corner of the <a href="#bounding-box"><var>bounding box</var></a>.
    <dt><var>&lt;length&gt;</var>
    <dd>
     <p>A length value gives a fixed length as the offset. The value for the
      horizontal and vertical offset represent an offset from the top left
      corner of the <a href="#bounding-box"><var>bounding box</var></a>.
     <p>For SVG elements without an associated CSS layout box the horizontal
      and vertical offset represent an offset from the point of origin of the
      element's local coordinate space.
    <dt><dfn id=top title="''top''!!'transform-origin' value">‘<code
     class=css>top</code>’</dfn>
    <dd>Computes to ‘<code class=css>0%</code>’ for the vertical position.
    <dt><dfn id=right title="''right''!!'transform-origin' value">‘<code
     class=css>right</code>’</dfn>
    <dd>Computes to ‘<code class=css>100%</code>’ for the horizontal
     position.
    <dt><dfn id=bottom title="''bottom''!!'transform-origin' value">‘<code
     class=css>bottom</code>’</dfn>
    <dd>Computes to ‘<code class=css>100%</code>’ for the vertical
     position.
    <dt><dfn id=left title="''left''!!'transform-origin' value">‘<code
     class=css>left</code>’</dfn>
    <dd>Computes to ‘<code class=css>0%</code>’ for the horizontal
     position.
    <dt><dfn id=center title="''center''!!'transform-origin' value">‘<code
     class=css>center</code>’</dfn>
    <dd>Computes to ‘<code class=css>50%</code>’ (‘<code class=css>left
 %</code>’) for the horizontal position if the horizontal position is
     not otherwise specified, or ‘<code class=css>50%</code>’ (‘<code
     class=css>top 50%</code>’) for the vertical position if it is.
   </dl>
   <p> The <a href="http://www.w3.org/TR/cssom/#resolved-value">resolved
    value</a> of ‘<a href="#transform-origin"><code
    class=property>transform-origin</code></a>’ is the <a
    href="http://www.w3.org/TR/CSS21/cascade.html#used-value">used value</a>
    (i.e., percentages are resolved to absolute lengths).</p>
   <!-- ======================================================================================================= -->
   <h2 id=transform-style-property><span class=secno>9. </span> The ‘<a
    href="#transform-style"><code class=property>transform-style</code></a>’
    Property</h2>
   <table class=propdef>
    <tbody>
     <tr>
      <td> <em>Name:</em>
      <td> <dfn id=transform-style>transform-style</dfn>
     <tr>
      <td> <em>Value:</em>
      <td> flat | preserve-3d
     <tr>
      <td> <em>Initial:</em>
      <td> flat
     <tr>
      <td> <em>Applies to:</em>
      <td> <a href="#TermTransformableElement">transformable elements</a>
     <tr>
      <td> <em>Inherited:</em>
      <td> no
     <tr>
      <td> <em>Percentages:</em>
      <td> N/A
     <tr>
      <td> <em>Media:</em>
      <td> visual
     <tr>
      <td> <em>Computed value:</em>
      <td> Same as specified value.
     <tr>
      <td> <em>Animatable:</em>
      <td> no
   </table>
   <p> A value of ‘<code class=css>preserve-3d</code>’ for ‘<a
    href="#transform-style"><code class=property>transform-style</code></a>’
    establishes a stacking context.
   <p> The following CSS property values require the user agent to create a
    flattened representation of the descendant elements before they can be
    applied, and therefore override the behavior of ‘<code
    class=css>transform-style: preserve-3d</code>’:
   <ul>
    <li>‘<code class=property>overflow</code>’: any value other than
     ‘<code class=css>visible</code>’.
    <li>‘<code class=property>opacity</code>’: any value other than
     ‘<code class=css>1</code>’.
    <li>‘<code class=property>filter</code>’: any value other than
     ‘<code class=css>none</code>’.
   </ul>
   <p> The computed value of ‘<a href="#transform-style"><code
    class=property>transform-style</code></a>’ is not affected.
   <p> The values of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ and ‘<a
    href="#transform-origin"><code
    class=property>transform-origin</code></a>’ properties are used to
    compute the <a class=term href="#transformation-matrix">transformation
    matrix</a>, as described above.</p>
   <!-- ======================================================================================================= -->
   <h2 id=perspective-property><span class=secno>10. </span> The ‘<a
    href="#perspective"><code class=property>perspective</code></a>’
    Property</h2>
   <table class=propdef>
    <tbody>
     <tr>
      <td> <em>Name:</em>
      <td> <dfn id=perspective>perspective</dfn>
     <tr>
      <td> <em>Value:</em>
      <td> none | &lt;length&gt;
     <tr>
      <td> <em>Initial:</em>
      <td> none
     <tr>
      <td> <em>Applies to:</em>
      <td> <a href="#TermTransformableElement">transformable elements</a>
     <tr>
      <td> <em>Inherited:</em>
      <td> no
     <tr>
      <td> <em>Percentages:</em>
      <td> N/A
     <tr>
      <td> <em>Media:</em>
      <td> visual
     <tr>
      <td> <em>Computed value:</em>
      <td> Absolute length or "none".
     <tr>
      <td> <em>Animatable:</em>
      <td> as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
   </table>
   <p> If the value is ‘<code class=css>none</code>’, no perspective
    transform is applied. Lengths must be positive.
   <p> The use of this property with any value other than ‘<code
    class=css>none</code>’ establishes a stacking context. It also
    establishes a containing block (somewhat similar to ‘<code
    class=css>position: relative</code>’), just like the ‘<a
    href="#effects"><code class=property>transform</code></a>’ property
    does.
   <p> The values of the ‘<a href="#perspective"><code
    class=property>perspective</code></a>’ and ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ properties are used to
    compute the <a class=term href="#perspective-matrix">perspective
    matrix</a>, as described above.</p>
   <!-- ======================================================================================================= -->
   <h2 id=perspective-origin-property><span class=secno>11. </span> The ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ Property</h2>
   <p> The ‘<a href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ property establishes the
    origin for the <a href="#perspective"><em>perspective</em></a> property.
    It effectively sets the X and Y position at which the viewer appears to be
    looking at the children of the element.
   <table class=propdef>
    <tbody>
     <tr>
      <td> <em>Name:</em>
      <td> <dfn id=perspective-origin>perspective-origin</dfn>
     <tr>
      <td> <em>Value:</em>
      <td> [ &lt;percentage> | &lt;length> | left | center | right | top |
       bottom]<br>
       |<br>
       [<br>
         [ &lt;percentage> | &lt;length&gt; | left | center | right ]<br>
         &amp;&amp;<br>
         [ &lt;percentage> | &lt;length&gt; | top | center | bottom ]<br>
       ]<br>
     <tr>
      <td> <em>Initial:</em>
      <td> 50% 50%
     <tr>
      <td> <em>Applies to:</em>
      <td> <a href="#TermTransformableElement">transformable elements</a>
     <tr>
      <td> <em>Inherited:</em>
      <td> no
     <tr>
      <td> <em>Percentages:</em>
      <td> refer to the size of the <a href="#bounding-box"><var>bounding
       box</var></a>
     <tr>
      <td> <em>Media:</em>
      <td> visual
     <tr>
      <td> <em>Computed value:</em>
      <td> For &lt;length&gt; the absolute value, otherwise a percentage.
     <tr>
      <td> <em>Animatable:</em>
      <td> as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
       list</a> of <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
       percentage, or calc</a>
   </table>
   <p> The values of the ‘<a href="#perspective"><code
    class=property>perspective</code></a>’ and ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ properties are used to
    compute the <a class=term href="#perspective-matrix">perspective
    matrix</a>, as described above.
   <p> If only one value is specified, the second value is assumed to be
    ‘<code class=css>center</code>’.
   <p> If at least one of the two values is not a keyword, then the first
    value represents the horizontal position (or offset) and the second
    represents the vertical position (or offset).
   <p> The values for ‘<a href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ represent an offset of the
    perspective origin from the top left corner of the <a
    href="#bounding-box"><var>bounding box</var></a>.
   <dl>
    <dt><var>&lt;percentage&gt;</var>
    <dd>
     <p>A percentage for the horizontal perspctive offset is relative to the
      width of the <a href="#bounding-box"><var>bounding box</var></a>. A
      percentage for the vertical offset is relative to height of the <a
      href="#bounding-box"><var>bounding box</var></a>. The value for the
      horizontal and vertical offset represent an offset from the top left
      corner of the <a href="#bounding-box"><var>bounding box</var></a>.
    <dt><var>&lt;length&gt;</var>
    <dd>
     <p>A length value gives a fixed length as the offset. The value for the
      horizontal and vertical offset represent an offset from the top left
      corner of the <a href="#bounding-box"><var>bounding box</var></a>.
    <dt><dfn id=top0 title="''top''!!'perspective-origin' value">‘<code
     class=css>top</code>’</dfn>
    <dd>Computes to ‘<code class=css>0%</code>’ for the vertical position.
    <dt><dfn id=right0 title="''right''!!'perspective-origin' value">‘<code
     class=css>right</code>’</dfn>
    <dd>Computes to ‘<code class=css>100%</code>’ for the horizontal
     position.
    <dt><dfn id=bottom0
     title="''bottom''!!'perspective-origin' value">‘<code
     class=css>bottom</code>’</dfn>
    <dd>Computes to ‘<code class=css>100%</code>’ for the vertical
     position.
    <dt><dfn id=left0 title="''left''!!'perspective-origin' value">‘<code
     class=css>left</code>’</dfn>
    <dd>Computes to ‘<code class=css>0%</code>’ for the horizontal
     position.
    <dt><dfn id=center0
     title="''center''!!'perspective-origin' value">‘<code
     class=css>center</code>’</dfn>
    <dd>Computes to ‘<code class=css>50%</code>’ (‘<code class=css>left
 %</code>’) for the horizontal position if the horizontal position is
     not otherwise specified, or ‘<code class=css>50%</code>’ (‘<code
     class=css>top 50%</code>’) for the vertical position if it is.
   </dl>
   <p> The <a href="http://www.w3.org/TR/cssom/#resolved-value">resolved
    value</a> of ‘<a href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’ is the <a
    href="http://www.w3.org/TR/CSS21/cascade.html#used-value">used value</a>
    (i.e., percentages are resolved to absolute lengths).</p>
   <!-- ======================================================================================================= -->
   <h2 id=backface-visibility-property><span class=secno>12. </span> The ‘<a
    href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ Property</h2>
   <p> The ‘<a href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ property determines
    whether or not the "back" side of a transformed element is visible when
    facing the viewer. With an identity transform, the front side of an
    element faces the viewer. Applying a rotation about Y of 180 degrees (for
    instance) would cause the back side of the element to face the viewer.
   <p class=note> Note that this property is useful when you place two
    elements back-to-back, as you would to create a playing card. Without this
    property, the front and back elements could switch places at times during
    an animation to flip the card. Another example is creating a box out of 6
    elements, but where you want to see the inside faces of the box. This is
    useful when creating the backdrop for a 3 dimensional stage.
   <table class=propdef>
    <tbody>
     <tr>
      <td> <em>Name:</em>
      <td> <dfn id=backface-visibility>backface-visibility</dfn>
     <tr>
      <td> <em>Value:</em>
      <td> visible | hidden
     <tr>
      <td> <em>Initial:</em>
      <td> visible
     <tr>
      <td> <em>Applies to:</em>
      <td> <a href="#TermTransformableElement">transformable elements</a>
     <tr>
      <td> <em>Inherited:</em>
      <td> no
     <tr>
      <td> <em>Percentages:</em>
      <td> N/A
     <tr>
      <td> <em>Media:</em>
      <td> visual
     <tr>
      <td> <em>Computed value:</em>
      <td> Same as specified value.
     <tr>
      <td> <em>Animatable:</em>
      <td> no
   </table>
   <p> The visibility of an element with ‘<code
    class=css>backface-visibility: hidden</code>’ is determined as follows:
   <ol>
    <li> For an element in a <a class=term href="#d-rendering-context">3D
     rendering context</a>, compute its <a class=term
     href="#accumulated-3d-transformation-matrix"> accumulated 3D
     transformation matrix</a>. For an element not in a <a class=term
     href="#d-rendering-context">3D rendering context</a>, compute its <a
     class=term href="#transformation-matrix">transformation matrix</a>.
    <li> If the component of the matrix in row 3, column 3 is negative, then
     the element should be hidden. Otherwise it is visible.
   </ol>
   <p class=note> The reasoning for this definition is as follows. Assume
    elements are rectangles in the <var>x</var>–<var>y</var> plane with
    infinitesimal thickness. The front of the untransformed element has
    coordinates like (<var>x</var>, <var>y</var>, <var>ε</var>), and the back
    is (<var>x</var>, <var>y</var>, −<var>ε</var>), for some very small
    <var>ε</var>. We want to know if after the transformation, the front of
    the element is closer to the viewer than the back (higher
    <var>z</var>-value) or further away. The <var>z</var>-coordinate of the
    front will be <var>M</var><sub>13</sub><var>x</var> +
    <var>M</var><sub>23</sub><var>y</var> +
    <var>M</var><sub>33</sub><var>ε</var> + <var>M</var><sub>43</sub>, before
    accounting for perspective, and the back will be
    <var>M</var><sub>13</sub><var>x</var> +
    <var>M</var><sub>23</sub><var>y</var> −
    <var>M</var><sub>33</sub><var>ε</var> + <var>M</var><sub>43</sub>. The
    first quantity is greater than the second if and only if
    <var>M</var><sub>33</sub> > 0. (If it equals zero, the front and back are
    equally close to the viewer. This probably means something like a
 -degree rotation, which makes the element invisible anyway, so we don't
    really care whether it vanishes.)</p>
   <!-- ======================================================================================================= -->
   <h2 id=svg-transform><span class=secno>13. </span> The SVG ‘<a
    href="#effects"><code class=property>transform</code></a>’ Attribute</h2>
   <p> The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1
    specification</a> did not specify the attributes ‘<a
    href="#effects"><code class=property>transform</code></a>’, ‘<code
    class=property>gradientTransform</code>’ or ‘<code
    class=property>patternTransform</code>’ as <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes"><em>presentation
    attributes</em></a>. In order to improve the integration of SVG and HTML,
    this specification makes these SVG attributes ‘<code
    class=css>presentation attributes</code>’ and makes the ‘<a
    href="#effects"><code class=property>transform</code></a>’ property one
    that applies to <a class=term href="#transformable-element">transformable
    elements</a> in the SVG namespace.
   <p> This specification will also introduce the new presentation attributes
    ‘<a href="#transform-origin"><code
    class=property>transform-origin</code></a>’, ‘<a
    href="#perspective"><code class=property>perspective</code></a>’, ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’, ‘<a
    href="#transform-style"><code class=property>transform-style</code></a>’
    and ‘<a href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’.
   <p> Values on new introduced presentation attributes get parsed following
    the syntax rules on <a href="#svg-data-types">SVG Data Types</a> <a
    href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
   <h3 id=transform-attribute-specificity><span class=secno>13.1. </span> SVG
    ‘<a href="#effects"><code class=property>transform</code></a>’
    attribute specificity</h3>
   <p> Since the previously named SVG attributes become presentation
    attributes, their participation in the CSS cascade is determined by the
    specificity of presentation attributes, as <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">explained</a>
    in the SVG specification.
   <div class=example>
    <p> This example shows the combination of the ‘<a href="#effects"><code
     class=property>transform</code></a>’ style property and the ‘<a
     href="#effects"><code class=property>transform</code></a>’ presentation
     attribute.
    <pre>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
     &lt;style&gt;
     .container {
         transform: translate(100px, 100px);
     }
     &lt;/style&gt;
     &lt;g class="container" transform="translate(200 200)"&gt;
         &lt;rect width="100" height="100" fill="blue" /&gt;
     &lt;/g&gt;
 &lt;/svg&gt;</pre>
    <div class=figure> <img alt="Translated SVG container element." height=240
     src="examples/svg-translate1.svg" width=470></div>
    <p> Because of the participation to the CSS cascade, the ‘<a
     href="#effects"><code class=property>transform</code></a>’ style
     property overrides the ‘<a href="#effects"><code
     class=property>transform</code></a>’ presentation attribute. Therefore
     the container gets translated by ‘<code class=css>100px</code>’ in
     both the horizontal and the vertical directions, instead of ‘<code
     class=css>200px</code>’.
   </div>
   <h3 id=svg-syntax><span class=secno>13.2. </span> Syntax of the SVG ‘<a
    href="#effects"><code class=property>transform</code></a>’ attribute</h3>
   <p> To provide backwards compatibility, the syntax of the ‘<a
    href="#effects"><code class=property>transform</code></a>’ presentation
    attribute differs from the syntax of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ style property as shown in the
    example above. However, the syntax used for the ‘<a
    href="#effects"><code class=property>transform</code></a>’ style
    property can be used for a ‘<a href="#effects"><code
    class=property>transform</code></a>’ presentation attribute value.
    Authors are advised to follow the rules of <a
    href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values
    and Units Module</a>. Therefore an author should write ‘<code
    class=css>transform="translate(200px, 200px)"</code>’ instead of
    ‘<code class=css>transform="translate (200 200)"</code>’ because the
    second example with the spaces before the ‘<code class=css>(</code>’,
    the missing comma between the arguments and the values without the
    explicit unit notation would be valid for the attribute only.
   <h4 id=svg-transform-list><span class=secno>13.2.1. </span> Transform List</h4>
   <p> The value for the ‘<a href="#effects"><code
    class=property>transform</code></a>’ attribute consists of a transform
    list with zero or more transform functions using <a
    href="#svg-functional-notation">functional notation</a>. If the transform
    list consists of more than one transform function, these functions are
    separated by optional whitespace, an optional comma (‘<code
    class=css>,</code>’) and optional whitespace. The transform list can
    have optional whitespace characters before and after the list.
   <h4 id=svg-functional-notation><span class=secno>13.2.2. </span> Functional
    Notation</h4>
   <p> The syntax starts with the name of the function followed by optional
    whitespace characters followed by a left parenthesis followed by optional
    whitespace followed by the argument(s) to the notation followed by
    optional whitespace followed by a right parenthesis. If a function takes
    more than one argument, the arguments are either separated by a comma
    (‘<code class=css>,</code>’) with optional whitespace characters
    before and after the comma, or by one or more whitespace characters.
   <h4 id=svg-data-types><span class=secno>13.2.3. </span> SVG Data Types</h4>
   <p> Arguments on all new introduced presentation attributes consist of data
    types in the sense of <a
    href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values
    and Units Module</a>. The definitions of data types in CSS Values and
    Units Module are enhanced as follows:
   <h5 id=svg-transform-value><span class=secno>13.2.3.1. </span> The
    <var>&lt;translation-value&gt;</var> and <var>&lt;length&gt;</var> type</h5>
   <p> A translation-value or length can be a <var>&lt;number&gt;</var>
    without an unit identifier. In this case the <a
    href="#svg-number"><var>number</var></a> gets interpreted as "user unit".
    A user unit in the the <a
    href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem">initial
    coordinate system</a> is equivalent to the parent environment's notion of
    a pixel unit.
   <h5 id=svg-angle><span class=secno>13.2.3.2. </span> The
    <var>&lt;angle&gt;</var> type</h5>
   <p> An angle can be a <var>&lt;number&gt;</var> without an unit identifier.
    In this case the <a href="#svg-number"><i>number</i></a> gets interpreted
    as a value in degrees.
   <h5 id=svg-number><span class=secno>13.2.3.3. </span> The
    <var>&lt;number&gt;</var> type</h5>
   <p> SVG supports scientific notations for numbers. Therefore a
    <var>number</var> gets parsed like described in SVG <a
    href="http://www.w3.org/TR/SVG/types.html#DataTypeNumber">Basic data
    types</a> for SVG attributes.
   <h3 id=svg-gradient-transform-pattern-transform><span class=secno>13.3.
    </span> The SVG ‘<code class=property>gradientTransform</code>’ and
    ‘<code class=property>patternTransform</code>’ attributes</h3>
   <p> SVG specifies the attributes ‘<code
    class=property>gradientTransform</code>’ and ‘<code
    class=property>patternTransform</code>’. This specification makes both
    attributes presentation attributes. Both attributes use the same <a
    href="#svg-syntax">syntax</a> as the SVG ‘<a href="#effects"><code
    class=property>transform</code></a>’ attribute. This specification does
    not introduce corresponding CSS style properties. Both, the ‘<code
    class=property>gradientTransform</code>’ and the ‘<code
    class=property>patternTransform</code>’ attribute, are presentation
    attributes for the ‘<a href="#effects"><code
    class=property>transform</code></a>’ property.
   <h3 id=svg-transform-functions><span class=secno>13.4. </span> SVG
    transform functions</h3>
   <p> For backwards compatibility with existing SVG content, this
    specification supports all transform functions defined by <a
    href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The
    ‘<code class=property>transform</code>’ attribute</a> in <a
    href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>. Therefore the
    two-dimensional transform function ‘<code
    class=css>rotate(&lt;angle&gt;)</code>’ is extended as follows:
   <dl>
    <dt id=rotate-three-function> <code class=css>rotate(&lt;angle&gt;[,
     &lt;translation-value&gt;, &lt;translation-value&gt;])</code>
    <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
     specified in the parameter about the origin of the element, as defined by
     the ‘<a href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property. If the optional
     translation values are specified, the transform origin is translated by
     that amount (using the current transformation matrix) for the duration of
     the rotate operation. For example ‘<code class=css>rotate(90deg, 100px,
 px)</code>’ would cause elements to appear rotated one-quarter of a
     turn in the clockwise direction after a translation of the
     transform-origin of 100 pixel in the horizontal and vertical directions.
   </dl>
   <p> User agents are just required to support the two optional arguments for
    translation on elements in the SVG namespace.
   <h3 id=svg-three-dimensional-functions><span class=secno>13.5. </span>SVG
    and 3D transform functions</h3>
   <p> This specification explicitly requires three-dimensional transform
    functions to apply to the <a
    href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement"><em>container
    elements</em></a>: ‘<code class=property>a</code>’, ‘<code
    class=property>g</code>’, ‘<code class=property>svg</code>’, all <a
    href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement"><em>graphics
    elements</em></a>, all <a
    href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsReferencingElement"><em>graphics
    referencing elements</em></a> and the SVG ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement">foreignObject</a></code>’
    element.
   <p> Three-dimensional transform functions and the properties ‘<a
    href="#perspective"><code class=property>perspective</code></a>’, ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’, ‘<a
    href="#transform-style"><code class=property>transform-style</code></a>’
    and ‘<a href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ can not be used for the
    elements: ‘<code class=property>clipPath</code>’, ‘<code
    class=property>linearGradient</code>’, ‘<code
    class=property>radialGradient</code>’ and ‘<code
    class=property>pattern</code>’. If a transform list includes a
    three-dimensional transform function, the complete transform list must be
    ignored. The values of every previously named property must be ignored. <a
    class=term href="#transformable-element">Transformable elements</a> that
    are contained by one of these elements can have three-dimensional
    transform functions. Before a ‘<code class=property>clipPath</code>’,
    ‘<code class=property>mask</code>’ or ‘<code
    class=property>pattern</code>’ element can get applied to a target
    element, user agents must take the drawn results as static images in
    analogue of "flattening" the elements and taking the rendered content as a
    two-dimensional canvas.
   <p> If the ‘<code class=property>vector-effect</code>’ property is set
    to ‘<code class=css>non-scaling-stroke</code>’ and an object is within
    a <a class=term href="#d-rendering-context">3D rendering context</a> the
    property has no affect on stroking the object.
   <h3 id=svg-user-coordinate-space><span class=secno>13.6. </span> User
    coordinate space</h3>
   <p> For the ‘<code class=property>pattern</code>’, ‘<code
    class=property>linearGradient</code>’, ‘<code
    class=property>radialGradient</code>’ and ‘<code
    class=property>clipPath</code>’ elements the ‘<a href="#effects"><code
    class=property>transform</code></a>’, ‘<code
    class=property>patternTransform</code>’, ‘<code
    class=property>gradientTransform</code>’ presentation attributes
    represents values in the current user coordinate system in place at the
    time when these elements are referenced (i.e., the user coordinate system
    for the element referencing the ‘<code class=property>pattern</code>’
    element via a ‘<code class=property>fill</code>’ or ‘<code
    class=property>stroke</code>’ property). Percentage values are relative
    to the <a href="#bounding-box">bounding box</a> of the referencing
    element.
   <p> In particualar the ‘<code class=property>patternUnit</code>’,
    ‘<code class=property>gradientUnit</code>’ and ‘<code
    class=property>maskUnit</code>’ attributes don't affect the user
    coordinate system used for transformations <a href="#SVG11"
    rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
   <p> For all other <a class=term href="#transformable-element">transformable
    elements</a> the ‘<a href="#effects"><code
    class=property>transform</code></a>’ presentation attribute represents
    values in the current user coordinate system of the parent. All percentage
    values of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ presentation attribute are relative
    to the element's <a href="#bounding-box"><var>bounding box</var></a>.
   <div class=example>
    <p> The ‘<a href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property on the pattern in
     the following example specifies a ‘<code class=css>50%</code>’
     translation of the origin in the horizontal and vertical dimension. The
     ‘<a href="#effects"><code class=property>transform</code></a>’
     property specifies a translation as well, but in absolute lengths.
    <pre>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
     &lt;style&gt;
     pattern {
         transform: rotate(45deg);
         transform-origin: 50% 50%;
     }
     &lt;/style&gt;
     &lt;defs&gt;
     &lt;pattern id="pattern-1"&gt;
         &lt;rect id="rect1" width="100" height="100" fill="blue" /&gt;
     &lt;/pattern&gt;
     &lt;/defs&gt;
     &lt;rect width="200" height="200" fill="url(#pattern-1)" /&gt;
 &lt;/svg&gt;</pre>
    <p> An SVG ‘<code class=property>pattern</code>’ element doesn't have
     a bounding box. The <a href="#bounding-box"><var>bounding box</var></a>
     of the referencing ‘<code class=property>rect</code>’ element is used
     instead to solve the relative values of the ‘<a
     href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property. Therefore the
     point of origin will get translated by 100 pixels temporarily to rotate
     the user space of the ‘<code class=property>pattern</code>’ elements
     content.
   </div>
   <h3 id=transform-attribute-dom><span class=secno>13.7. </span> SVG DOM
    interface for the ‘<a href="#effects"><code
    class=property>transform</code></a>’ attribute</h3>
   <p> The SVG specification defines the ‘<code class=css><a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a></code>’
    interface in the SVG DOM to provide access to the animated and the base
    value of the SVG ‘<a href="#effects"><code
    class=property>transform</code></a>’, ‘<code
    class=property>gradientTransform</code>’ and ‘<code
    class=property>patternTransform</code>’ attributes. To ensure backwards
    compatibility, this API must still be supported by user agents.
   <p> The ‘<a href="#effects"><code class=property>transform</code></a>’
    property contributes to the CSS cascade. According to SVG 1.1 user agents
    conceptually insert a <a
    href="http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes">new
    author style sheet</a> for presentation attributes, which is the first in
    the author style sheet collection. ‘<code
    class=property>baseVal</code>’ gives the author the possibility to
    access and modify the values of the SVG ‘<a href="#effects"><code
    class=property>transform</code></a>’ attribute. To provide the necessary
    backwards compatibility to the SVG DOM, ‘<code
    class=property>baseVal</code>’ must reflect the values of this author
    style sheet. All modifications to SVG DOM objects of ‘<code
    class=property>baseVal</code>’ must affect this author style sheet
    immediately.
   <p> ‘<code class=property>animVal</code>’ represents the computed style
    of the ‘<a href="#effects"><code class=property>transform</code></a>’
    property. Therefore it includes all applied <a
    href="http://www.w3.org/TR/css3-transitions/">CSS3 Transitions</a>, <a
    href="http://www.w3.org/TR/css3-animations/">CSS3 Animations</a> or <a
    href="#svg-animation">SVG Animations</a> if any of those are underway. The
    computed style and SVG DOM objects of ‘<code
    class=property>animVal</code>’ can not be modified.
   <p> The attribute ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__type">type</a></code>’
    of ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">SVGTransform</a></code>’
    must return ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN">SVG_TRANSFORM_UNKNOWN</a></code>’
    for <a href="#transform-functions">Transform Functions</a> or unit types
    that are not supported by this interface. If a two-dimensional transform
    function is not supported, the attribute ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__matrix">matrix</a></code>’
    must return a 3x2 ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a></code>’
    with the corresponding values as described in the section <a
    href="#mathematical-description">Mathematical Description of Transform
    Functions</a>.
   <h2 id=svg-animation><span class=secno>14. </span> SVG Animation</h2>
   <h3 id=svg-animate-element><span class=secno>14.1. </span> The ‘<code
    class=property>animate</code>’ and ‘<code class=property>set</code>’
    element</h3>
   <p> With this specification, the ‘<code class=property>animate</code>’
    element and the ‘<code class=property>set</code>’ element can animate
    the data type <var>&lt;transform-list&gt;</var>.
   <p> The animation effect is post-multiplied to the underlying value for
    additive ‘<code class=property>animate</code>’ animations (see below)
    instead of added to the underlying value, due to the specific behavior of
    <var>&lt;transform-list&gt;</var> animations.
   <p> <var>From-to</var>, <var>from-by</var> and <var>by</var> animations are
    defined in SMIL to be equivalent to a corresponding <var>values</var>
    animation. However, <var>to</var> animations are a mixture of additive and
    non-additive behavior <a href="#SMIL3"
    rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a>.
   <p> <var>To</var> animations on ‘<code class=property>animate</code>’
    provide specific functionality to get a smooth change from the underlying
    value to the ‘<code class=property>to</code>’ attribute value, which
    conflicts mathematically with the requirement for additive transform
    animations to be post-multiplied. As a consequence, the behavior of
    <var>to</var> animations for ‘<code class=property>animate</code>’ is
    undefined. Authors are suggested to use <var>from-to</var>,
    <var>from-by</var>, <var>by</var> or <var>values</var> animations to
    achieve any desired transform animation.
   <p> The value ‘<code class=property>paced</code>’ is undefined for the
    attribute ‘<code class=property>calcMode</code>’ on ‘<code
    class=property>animate</code>’ for animations of the data type
    <var>&lt;transform-list&gt;</var>. If specified, UAs may choose the value
    ‘<code class=property>linear</code>’ instead. Future versions of this
    specification may define how paced animations can be performed on
    <var>&lt;transform-list&gt;</var>.
   <p class=note>The following paragraphs extend <a
    href="http://www.w3.org/TR/SVG/animate.html#complexDistances">Elements,
    attributes and properties that can be animated</a> <a href="#SVG11"
    rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
   <p> The introduce presentation attributes ‘<a href="#effects"><code
    class=property>transform</code></a>’, ‘<a
    href="#transform-origin"><code
    class=property>transform-origin</code></a>’, ‘<a
    href="#perspective"><code class=property>perspective</code></a>’, ‘<a
    href="#perspective-origin"><code
    class=property>perspective-origin</code></a>’, ‘<a
    href="#transform-style"><code class=property>transform-style</code></a>’
    and ‘<a href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ are animatable. ‘<a
    href="#transform-style"><code class=property>transform-style</code></a>’
    and ‘<a href="#backface-visibility"><code
    class=property>backface-visibility</code></a>’ are non-additive.
   <p> With this specification the SVG basic data type
    <var>&lt;transform-list&gt;</var> is equivalent to a list of
    <var>&lt;transform-function&gt;</var>s. <var>&lt;transform-list&gt;</var>
    is animatable and additive. The data type can be animated using the SVG
    ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/animate.html#AnimateElement">animate</a></code>’
    element and the SVG ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/animate.html#SetElement">set</a></code>’
    element. SVG animations must run the same animation steps as described in
    section <a href="#animation">Transitions and Animations between Transform
    Values</a>.
   <p> The set of animatable data types gets extended by
    <em>&lt;translation-value&gt;</em>. The new data type is animatable and
    additive.
   <table class=data>
    <caption>Animatable data types</caption>
    <thead>
     <tr>
      <th>Data type
      <th>Additive?
      <th>‘<code class=property>animate</code>’
      <th>‘<code class=property>set</code>’
      <th>‘<code class=property>animateColor</code>’
      <th>‘<code class=property>animateTransform</code>’
      <th>Notes
    <tbody>
     <tr>
      <th><var>&lt;transform-list&gt;</var>
      <td>yes
      <td>yes
      <td>yes
      <td>no
      <td>yes
      <td>Additive for ‘<code class=property>animateTransform</code>’
       means that a transformation is post-multiplied to the base set of
       transformations.
     <tr>
      <th><var>&lt;translation-value&gt;</var>
      <td>yes
      <td>yes
      <td>yes
      <td>no
      <td>no
      <td>
   </table>
   <h3 id=neutral-element><span class=secno>14.2. </span> Neutral element for
    addition</h3>
   <p> Some animations require a neutral element for addition. For transform
    functions this is a scalar or a list of scalars of 0. Examples of neutral
    elements for transform functions are ‘<code
    class=css>translate(0)</code>’, ‘<code class=css>translate3d(0, 0,
 )</code>’, ‘<code class=css>translateX(0)</code>’, ‘<code
    class=css>translateY(0)</code>’, ‘<code
    class=css>translateZ(0)</code>’, ‘<code class=css>scale(0)</code>’,
    ‘<code class=css>scaleX(0)</code>’, ‘<code
    class=css>scaleY(0)</code>’, ‘<code class=css>scaleZ(0)</code>’,
    ‘<code class=css>rotate(0)</code>’, ‘<code
    class=css>rotate3d(v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>,
 )</code>’ (where <var>v</var> is a context dependent vector), ‘<code
    class=css>rotateX(0)</code>’, ‘<code class=css>rotateY(0)</code>’,
    ‘<code class=css>rotateZ(0)</code>’, ‘<code class=css>skew(0,
 )</code>’, ‘<code class=css>skewX(0)</code>’, ‘<code
    class=css>skewY(0)</code>’, ‘<code class=css>matrix(0, 0, 0, 0, 0,
 )</code>’, ‘<code class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 , 0, 0, 0, 0)</code>’ and ‘<code class=css>perspective(0)</code>’.
   <p class=note> Animations to or from the neutral element of additions
    ‘<code class=css>matrix</code>’, ‘<code class=css>matrix3d</code>’
    and ‘<a href="#perspective"><code class=css>perspective</code></a>’
    fall back to discrete animations (See <a
    href="#matrix-interpolation">Interpolation of Matrices</a>).
   <div class=example>
    <p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent
     to the same animation with a values list with 2 values, the neutral
     element for addition for the domain of the target attribute (denoted 0)
     and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’. <a
     href="#SMIL3" rel=biblioentry>[SMIL3]<!--{{SMIL3}}--></a>
    <pre>
 &lt;rect width="100" height="100"&gt;
     &lt;animateTransform attributeName="transform" attributeType="XML"
       type="scale" by="1" dur="5s" fill="freeze"/&gt;
 &lt;/rect&gt;</pre>
    <p> The neutral element for addition when performing a <var>by</var>
     animation with ‘<code class=css>type="scale"</code>’ is the value 0.
     Thus, performing the animation of the example above causes the rectangle
     to be invisible at time 0s (since the animated transform list value is
     ‘<code class=css>scale(0)</code>’), and be scaled back to its
     original size at time 5s (since the animated transform list value is
     ‘<code class=css>scale(1)</code>’).
   </div>
   <h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG ‘<code
    class=property>attributeName</code>’ attribute</h3>
   <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>
    defines the ‘<code class=css><a
    href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">attributeName</a></code>’
    attribute to specify the name of the target attribute. For the
    presentation attributes ‘<code
    class=property>gradientTransform</code>’ and ‘<code
    class=property>patternTransform</code>’ it will also be possible to use
    the value ‘<a href="#effects"><code
    class=property>transform</code></a>’. The same ‘<a
    href="#effects"><code class=property>transform</code></a>’ property will
    get animated.
   <div class=example>
    <p> In this example the gradient transformation of the linear gradient
     gets animated.
    <pre>&lt;linearGradient gradientTransform="scale(2)"&gt;
     &lt;animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
           dur="3s" additive="sum"/&gt;
     &lt;animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
           dur="3s" additive="sum"/&gt;
 &lt;/linearGradient&gt;</pre>
    <p>The ‘<code class=property>linearGradient</code>’ element specifies
     the ‘<code class=property>gradientTransform</code>’ presentation
     attribute. The two ‘<code class=property>animate</code>’ elements
     address the target attribute ‘<code
     class=property>gradientTransform</code>’ and ‘<a
     href="#effects"><code class=property>transform</code></a>’. Even so all
     animations apply to the same gradient transformation by taking the value
     of the ‘<code class=property>gradientTransform</code>’ presentation
     attribute, applying the scaling of the first animation and applying the
     translation of the second animation one after the other.
   </div>
   <!-- ======================================================================================================= -->
   <h2 id=transform-functions><span class=secno>15. </span> The Transform
    Functions</h2>
   <p> The value of the ‘<a href="#effects"><code
    class=property>transform</code></a>’ property is a list of
    <var>&lt;transform-functions&gt;</var>. The set of allowed transform
    functions is given below. For <var>&lt;transform-functions&gt;</var> the
    type <var>&lt;translation-value&gt;</var> is defined as a
    <var>&lt;length&gt;</var> or <var>&lt;percentage&gt;</var> value, and the
    <var>&lt;angle&gt;</var> type is defined by <a
    href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module.</a>
    Wherever <var>&lt;angle&gt;</var> is used in this specification, a
    <var>&lt;number&gt;</var> that is equal to zero is also allowed, which is
    treated the same as an angle of zero degrees.
   <h3 id=two-d-transform-functions><span class=secno>15.1. </span>2D
    Transform Functions</h3>
   <dl>
    <dt id=matrix-function> <code class=css>matrix(&lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;)</code>
    <dd> specifies a 2D transformation in the form of a <a
     href="#MatrixDefined">transformation matrix</a> of the six values a-f.
    <dt id=translate-function> <code
     class=css>translate(&lt;translation-value&gt;[,
     &lt;translation-value&gt;])</code>
    <dd> specifies a <a href="#TranslateDefined">2D translation</a> by the
     vector [tx, ty], where tx is the first translation-value parameter and ty
     is the optional second translation-value parameter. If
     <em>&lt;ty&gt;</em> is not provided, ty has zero as a value.
    <dt id=translateX-function> <code
     class=css>translateX(&lt;translation-value&gt;)</code>
    <dd> specifies a <a href="#TranslateDefined">translation</a> by the given
     amount in the X direction.
    <dt id=translateY-function> <code
     class=css>translateY(&lt;translation-value&gt;)</code>
    <dd> specifies a <a href="#TranslateDefined">translation</a> by the given
     amount in the Y direction.
    <dt id=scale-function> <code class=css>scale(&lt;number&gt;[,
     &lt;number&gt;])</code>
    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation by the
     [sx,sy] scaling vector described by the 2 parameters. If the second
     parameter is not provided, it takes a value equal to the first. For
     example, scale(1, 1) would leave an element unchanged, while scale(2, 2)
     would cause it to appear twice as long in both the X and Y axes, or four
     times its typical geometric size.
    <dt id=scaleX-function> <code class=css>scaleX(&lt;number&gt;)</code>
    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the
     [sx,1] scaling vector, where sx is given as the parameter.
    <dt id=scaleY-function> <code class=css>scaleY(&lt;number&gt;)</code>
    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the
     [1,sy] scaling vector, where sy is given as the parameter.
    <dt id=rotate-function> <code class=css>rotate(&lt;angle&gt;)</code>
    <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
     specified in the parameter about the origin of the element, as defined by
     the ‘<a href="#transform-origin"><code
     class=property>transform-origin</code></a>’ property. For example,
     ‘<code class=css>rotate(90deg)</code>’ would cause elements to appear
     rotated one-quarter of a turn in the clockwise direction.
    <dt> <code class=css>skew(&lt;angle&gt;[, &lt;angle&gt;])</code>
    <dd> specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and
     Y. If the second parameter is not provided, it has a zero value.
     <p class=note>Note that the behavior of ‘<code class=css>skew</code>’
      is different from mutliplying ‘<code class=css>skewX</code>’ with
      ‘<code class=css>skewY</code>’. Implementations must support this
      function for compatibility with legacy content.
    <dt id=skewX-function> <code class=css>skewX(&lt;angle&gt;)</code>
    <dd> specifies a <a href="#SkewXDefined">2D skew transformation along the
     X axis</a> by the given angle.
    <dt id=skewY-function> <code class=css>skewY(&lt;angle&gt;)</code>
    <dd> specifies a <a href="#SkewYDefined">2D skew transformation along the
     Y axis</a> by the given angle.
   </dl>
   <h3 id=three-d-transform-functions><span class=secno>15.2. </span>3D
    Transform Functions</h3>
   <dl>
    <dt id=matrix3d-function> <code class=css>matrix3d(&lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
    <dd> specifies a 3D transformation as a 4x4 homogeneous matrix of 16
     values in column-major order.
    <dt id=translate3d-function> <code
     class=css>translate3d(&lt;translation-value&gt;,
     &lt;translation-value&gt;, &lt;length&gt;)</code>
    <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the
     vector [tx,ty,tz], with tx, ty and tz being the first, second and third
     translation-value parameters respectively.
    <dt id=translateZ-function> <code
     class=css>translateZ(&lt;length&gt;)</code>
    <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the
     vector [0,0,tz] with the given amount in the Z direction.
    <dt id=scale3d-function> <code class=css>scale3d(&lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;)</code>
    <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation by the
     [sx,sy,sz] scaling vector described by the 3 parameters.
    <dt id=scaleZ-function> <code class=css>scaleZ(&lt;number&gt;)</code>
    <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation using
     the [1,1,sz] scaling vector, where sz is given as the parameter.
    <dt id=rotate3d-function> <code class=css>rotate3d(&lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>
    <dd> specifies a <a href="#Rotate3dDefined">3D rotation</a> by the angle
     specified in last parameter about the [x,y,z] direction vector described
     by the first three parameters. A direction vector that cannot be
     normalized, such as [0,0,0], will cause the rotation to not be applied.
     <p class=note>Note that the rotation is clockwise as one looks from the
      end of the vector toward the origin.
    <dt id=rotateX-function> <code class=css>rotateX(&lt;angle&gt;)</code>
    <dd> same as <code class=css>rotate3d(1, 0, 0, &lt;angle&gt;)</code>.
    <dt id=rotateY-function> <code class=css>rotateY(&lt;angle&gt;)</code>
    <dd> same as <code class=css>rotate3d(0, 1, 0, &lt;angle&gt;)</code>.
    <dt id=rotateZ-function> <code class=css>rotateZ(&lt;angle&gt;)</code>
    <dd> same as <code class=css>rotate3d(0, 0, 1, &lt;angle&gt;)</code>,
     which is also the same as <code class=css>rotate(&lt;angle&gt;)</code>.
    <dt id=perspective-function> <code
     class=css>perspective(&lt;length&gt;)</code>
    <dd> specifies a <a href="#PerspectiveDefined">perspective projection
     matrix</a>. This matrix scales points in X and Y based on their Z value,
     scaling points with positive Z values away from the origin, and those
     with negative Z values towards the origin. Points on the z=0 plane are
     unchanged. The parameter represents the distance of the z=0 plane from
     the viewer. Lower values give a more flattened pyramid and therefore a
     more pronounced perspective effect. For example, a value of 1000px gives
     a moderate amount of foreshortening and a value of 200px gives an extreme
     amount. The value for depth must be greater than zero, otherwise the
     function is invalid.
   </dl>
   <!-- ======================================================================================================= -->
   <h2 id=transform-function-lists><span class=secno>16. </span> The Transform
    Function Lists</h2>
   <p> If a list of <var>&lt;transform-functions&gt;</var> is provided, then
    the net effect is as if each transform function had been specified
    separately in the order provided. For example,
   <pre>
 &lt;div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/&gt;
 </pre>
   <p> is functionally equivalent to:
   <pre>
 &lt;div style="transform:translate(-10px,-20px)"&gt;
   &lt;div style="transform:scale(2)"&gt;
     &lt;div style="transform:rotate(45deg)"&gt;
       &lt;div style="transform:translate(5px,10px)"&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
   <p> That is, in the absence of other styling that affects position and
    dimensions, a nested set of transforms is equivalent to a single list of
    transform functions, applied from the outside in. The resulting transform
    is the matrix multiplication of the list of transforms.
   <p> If a transform function causes the <a class=term
    href="#current-transformation-matrix-ctm">current transformation matrix
    (CTM)</a> of an object to be non-invertible, the object and its content do
    not get displayed.
   <div class=example>
    <p> The object in the following example gets scaled by 0.
    <pre>&lt;style&gt;
 .box {
     transform: scale(0);
 }
 &lt;/style&gt;
 &lt;div class="box"&gt;
     Not visible
 &lt;/div&gt;</pre>
    <p> The scaling causes a non-invertible CTM for the coordinate space of
     the div box. Therefore neither the div box, nor the text in it get
     displayed.
   </div>
   <!-- ======================================================================================================= -->
   <h2 id=animation><span class=secno>17. </span> Interpolation of Transforms</h2>
   <p> When animating or transitioning transforms, the transform function
    lists must be interpolated. For interpolation between one transform
    <em>from-transform</em> and a second transforms <em>to-transform</em>, the
    rules described below are applied.
   <ul>
    <li id=none-none-animation> If both the <em>from-</em> and
     <em>to-transform</em> are ‘<code class=css>none</code>’:
     <ul>
      <li> There is no interpolation necessary. The computed value stays
       ‘<code class=css>none</code>’.
     </ul>
    <li id=none-transform-animation> If one of the <em>from-</em> or
     <em>to-transforms</em> is ‘<code class=css>none</code>’.
     <ul>
      <li> The value ‘<code class=css>none</code>’ is replaced by an
       equivalent <a href="#TermIdentityTransformFunction"><i>identity
       transform function</i></a> list for the corresponding transform
       function list. Both transform function lists get interpolated following
       the next rule.
     </ul>
     <div class=example>
      <p> For example, if <em>from-transform</em> is ‘<code
       class=css>scale(2)</code>’ and <em>to-transform</em> is ‘<code
       class=css>none</code>’ then the value ‘<code
       class=css>scale(1)</code>’ will be used for <em>to-transform</em> and
       animation will proceed using the next rule. Similarly, if
       <em>from-transform</em> is ‘<code class=css>none</code>’ and
       <em>to-transform</em> is ‘<code class=css>scale(2)
       rotate(50deg)</code>’ then the animation will execute as if
       <em>from-transform</em> is ‘<code class=css>scale(1)
       rotate(0)</code>’.
     </div>
    <li id=transform-transform-animation> If <em>from-</em> and
     <em>to-transform</em> have the same number of transform functions, each
     transform function pair has either the same name, or is a derivative of
     the same <a href="#transform-primitives">primitive</a>.
     <ul>
      <li> Interpolate each transform function pair as described in <a
       href="#interpolation-of-transform-functions">Interpolation of transform
       functions</a>. The computed value is the resulting transform function
       list.
     </ul>
     <div class=example>
      <p> For example, if <em>from-transform</em> is ‘<code
       class=css>scale(1) translate(0)</code>’ and <em>to-transform</em> is
       ‘<code class=css>translate(100px) scale(2)</code>’ then ‘<code
       class=css>scale(1)</code>’ and ‘<code
       class=css>translate(100px)</code>’ as well as ‘<code
       class=css>translate(0)</code>’ and ‘<code
       class=css>scale(2)</code>’ don't share a common primitive and
       therefore can not get interpolated following this rule.
     </div>
    <li id=other-animation> In all other cases:
     <ul>
      <li> The transform functions of each transform function list on the
       <em>from-</em> and <em>to-transform</em> get post multiplied and
       converted into 4x4 matrices. Each of the matrices gets interpolated
       following the instructions in <a
       href="#matrix-interpolation">Interpolation of matrices</a>. The
       computed value is the transform function ‘<code
       class=css>matrix</code>’ if both initial matrices can be represented
       by a correlating 3x2 matrix and ‘<code class=css>matrix3d</code>’
       otherwise.
     </ul>
   </ul>
   <p> In some cases, an animation might cause a transformation matrix to be
    singular or non-invertible. For example, an animation in which scale moves
    from 1 to -1. At the time when the matrix is in such a state, the
    transformed element is not rendered.</p>
   <!-- ======================================================================================================= -->
   <h2 id=transform-primitives><span class=secno>18. </span> Transform
    function primitives and derivatives</h2>
   <p> Some transform functions can be represented by more generic transform
    functions. These transform functions are called derived transform
    functions, the generic transform functions primitives. Primitives for
    two-dimensional and three-dimensional transform functions are listed
    below.
   <p> Two-dimensional primitives with derived transform functions are:
   <dl>
    <dt id=translate-primitive> <code
     class=css>translate(&lt;translation-value&gt;,
     &lt;translation-value&gt;)</code>
    <dd> for <code class=css>translateX(&lt;translation-value&gt;)</code>,
     <code class=css>translateY(&lt;translation-value&gt;)</code> and <code
     class=css>translate(&lt;translation-value&gt;)</code>.
    <dt id=rotate-three-primitive> <code class=css>rotate(&lt;angle&gt;,
     &lt;translation-value&gt;, &lt;translation-value&gt;)</code>
    <dd> for <code class=css>rotate(&lt;angle&gt;)</code> if <a
     href="#svg-transform-functions">rotate with three arguments</a> is
     supported.
    <dt id=scale-primitive> <code class=css>scale(&lt;number&gt;,
     &lt;number&gt;)</code>
    <dd> for <code class=css>scaleX(&lt;number&gt;)</code>, <code
     class=css>scaleY(&lt;number&gt;)</code> and <code
     class=css>scale(&lt;number&gt;)</code>.
   </dl>
   <p> Three-dimensional primitives with derived transform functions are:
   <dl>
    <dt id=translate3d-primitive> <code
     class=css>translate3d(&lt;translation-value&gt;,
     &lt;translation-value&gt;, &lt;length&gt;)</code>
    <dd> for <code class=css>translateX(&lt;translation-value&gt;)</code>,
     <code class=css>translateY(&lt;translation-value&gt;)</code>, <code
     class=css>translateZ(&lt;number&gt;)</code> and <code
     class=css>translate(&lt;translation-value&gt;[,
     &lt;translation-value&gt;])</code>.
    <dt id=scale3d-primitive> <code class=css>scale3d(&lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;)</code>
    <dd> for <code class=css>scaleX(&lt;number&gt;)</code>, <code
     class=css>scaleY(&lt;number&gt;)</code>, <code
     class=css>scaleZ(&lt;number&gt;)</code> and <code
     class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>.
    <dt id=rotate3d-primitive> <code class=css>rotate3d(&lt;number&gt;,
     &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>
    <dd> for <code class=css>rotate(&lt;number&gt;)</code>, <code
     class=css>rotateX(&lt;number&gt;)</code>, <code
     class=css>rotateY(&lt;number&gt;)</code> and <code
     class=css>rotateZ(&lt;number&gt;)</code>.
   </dl>
   <p id=interpolation-two-three-dimensional-function> For derived transform
    functions that have a two-dimensional primitive and a three-dimensional
    primitive, the context decides about the used primitive. See <a
    href="#interpolation-of-transform-functions">Interpolation of primitives
    and derived transform functions</a>.</p>
   <!-- ======================================================================================================= -->
   <h2 id=interpolation-of-transform-functions><span class=secno>19. </span>
    Interpolation of primitives and derived transform functions</h2>
   <p> Two transform functions with the same name and the same number of
    arguments are interpolated numerically without a former conversion. The
    calculated value will be of the same transform function type with the same
    number of arguments. Special rules apply to ‘<code
    class=css>rotate3d</code>’, ‘<code class=css>matrix</code>’,
    ‘<code class=css>matrix3d</code>’ and ‘<a href="#perspective"><code
    class=css>perspective</code></a>’.
   <div class=example>
    <p> The two transform functions ‘<code class=css>translate(0)</code>’
     and ‘<code class=css>translate(100px)</code>’ are of the same type,
     have the same number of arguments and therefore can get interpolated
     numerically. ‘<code class=css>translateX(100px)</code>’ is not of the
     same type and ‘<code class=css>translate(100px, 0)</code>’ does not
     have the same number of arguments, therefore these transform functions
     can not get interpolated without a former conversion step.
   </div>
   <p> Two different types of transform functions that share the same
    primitive, or transform functions of the same type with different number
    of arguments can be interpolated. Both transform functions need a former
    conversion to the common primitive first and get interpolated numerically
    afterwards. The computed value will be the primitive with the resulting
    interpolated arguments.
   <div class=example>
    <p> The following example describes a transition from ‘<code
     class=css>translateX(100px)</code>’ to ‘<code
     class=css>translateY(100px)</code>’ in 3 seconds on hovering over the
     div box. Both transform functions derive from the same primitive <code
     class=css>translate(&lt;translation-value&gt;,
     &lt;translation-value&gt;)</code> and therefore can be interpolated.
    <pre>div {
     transform: translateX(100px);
 }
 div:hover {
     transform: translateY(100px);
     transition: transform 3s;
 }</pre>
    <p> For the time of the transition both transform functions get
     transformed to the common primitive. ‘<code
     class=css>translateX(100px)</code>’ gets converted to ‘<code
     class=css>translate(100px, 0)</code>’ and ‘<code
     class=css>translateY(100px)</code>’ gets converted to ‘<code
     class=css>translate(0, 100px)</code>’. Both transform functions can
     then get interpolated numerically.
   </div>
   <p> If both transform functions share a primitive in the two-dimensional
    space, both transform functions get converted to the two-dimensional
    primitive. If one or both transform functions are three-dimensional
    transform functions, the common three-dimensional primitive is used.
   <div class=example>
    <p> In this example a two-dimensional transform function gets animated to
     a three-dimensional transform function. The common primitive is <code
     class=css>translate3d</code>.
    <pre>div {
     transform: translateX(100px);
 }
 div:hover {
     transform: translateZ(100px);
     transition: transform 3s;
 }</pre>
    <p> First ‘<code class=css><code
     class=css>translateX(100px)</code></code>’ gets converted to ‘<code
     class=css><code class=css>translate3d(100px, 0, 0)</code></code>’ and
     ‘<code class=css><code class=css>translateZ(100px)</code></code>’ to
     ‘<code class=css><code class=css>translate3d(0, 0,
 px)</code></code>’ respectively. Then both converted transform
     functions get interpolated numerically.
   </div>
   <p> The transform functions ‘<code class=css>matrix</code>’, ‘<code
    class=css>matrix3d</code>’ and ‘<a href="#perspective"><code
    class=css>perspective</code></a>’ get converted into 4x4 matrices first
    and interpolated as defined in section <a
    href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.
   <p> For interpolatations with the primitive ‘<code
    class=css>rotate3d</code>’, the direction vectors of the transform
    functions get normalized first. If the normalized vectors are equal, the
    rotation angle gets interpolated numerically. Otherwise the transform
    functions get converted into 4x4 matrices first and interpolated as
    defined in section <a href="#matrix-interpolation">Interpolation of
    Matrices</a> afterwards.</p>
   <!-- ======================================================================================================= -->
   <h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of
    Matrices</h2>
   <p> When interpolating between two matrices, each is decomposed into the
    corresponding translation, rotation, scale, skew and perspective values.
    Not all matrices can be accurately described by these values. Those that
    can't are decomposed into the most accurate representation possible, using
    the pseudocode in <a href="#matrix-decomposing">Decomposing the
    Matrix</a>. The resulting values get <a
    href="#matrix-values-interpolation">interpolated numerically</a> and <a
    href="#matrix-recomposing">recomposed back to a matrix</a> in a final
    step.
   <div class=note>
    <p> In the following example the element gets translated by 100 pixel in
     both the X and Y directions and rotated by 1170 degree on hovering. The
     initial transformation is 45 degree. With the usage of transition, an
     author might expect a animated, clockwise rotation by three and a quarter
     turn (1170 degree).
    <pre>
 &lt;style&gt;
 div {
     transform: rotate(45deg);
 }
 div:hover {
     transform: translate(100px, 100px) rotate(1215deg);
     transition: transform 3s;
 }
 &lt;/style&gt;
 &lt;div&gt;&lt;/div&gt;</pre>
    <p> The number of transform functions on the source transform ‘<code
     class=css>rotate(45deg)</code>’ differs from the number of transform
     functions on the destination transform ‘<code
     class=css>translate(100px, 100px) rotate(1125deg)</code>’. According to
     the last rule of <a href="#animation">Interpolation of Transforms</a>,
     both transforms must be interpolated by matrix interpolation. With
     converting the transformation functions to matrices, the information
     about the three turns gets lost and the element gets rotated by just a
     quarter turn (90 degree).
    <p> To achieve the three and a quarter turns for the example above, source
     and destination transforms must fulfill the third rule of <a
     href="#animation">Interpolation of Transforms</a>. Source transform could
     look like ‘<code class=css>translate(0, 0) rotate(45deg)</code>’ for
     a linearly interpolation of the transform functions.
   </div>
   <p> If one of the matrices for interpolation is non-invertible, the used
    animation function must fallback to a discrete animation according to the
    rules of the respective animation specification.
   <h3 id=matrix-decomposing><span class=secno>20.1. </span>Decomposing the
    Matrix</h3>
   <p> The pseudocode below is based upon the "unmatrix" method in "Graphics
    Gems II, edited by Jim Arvo", but modified to use Quaternions instead of
    Euler angles to avoid the problem of Gimbal Locks.
   <p> The following pseudocode works on a 4x4 homogeneous matrix:
   <pre>
 Input:  matrix      ; a 4x4 matrix
 Output: translation ; a 3 component vector
         scale       ; a 3 component vector
         skew        ; skew factors XY,XZ,YZ represented as a 3 component vector
         perspective ; a 4 component vector
         quaternion  ; a 4 component vector
 Returns false if the matrix cannot be decomposed, true if it can
 Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix):
   double  determinant(matrix)          returns the 4x4 determinant of the matrix
   matrix  inverse(matrix)              returns the inverse of the passed matrix
   matrix  transpose(matrix)            returns the transpose of the passed matrix
   point   multVecMatrix(point, matrix) multiplies the passed point by the passed matrix
                                        and returns the transformed point
   double  length(point)                returns the length of the passed vector
   point   normalize(point)             normalizes the length of the passed point to 1
   double  dot(point, point)            returns the dot product of the passed points
   double  sqrt(double)                 returns the root square of passed value
   double  max(double y, double x)      returns the bigger value of the two passed values
 Decomposition also makes use of the following function:
   point combine(point a, point b, double ascl, double bscl)
       result[0] = (ascl * a[0]) + (bscl * b[0])
       result[1] = (ascl * a[1]) + (bscl * b[1])
       result[2] = (ascl * a[2]) + (bscl * b[2])
       return result
 // Normalize the matrix.
 if (matrix[3][3] == 0)
     return false
 for (i = 0; i < 4; i++)
     for (j = 0; j < 4; j++)
         matrix[i][j] /= matrix[3][3]
 // perspectiveMatrix is used to solve for perspective, but it also provides
 // an easy way to test for singularity of the upper 3x3 component.
 perspectiveMatrix = matrix
 for (i = 0; i < 3; i++)
     perspectiveMatrix[i][3] = 0
 perspectiveMatrix[3][3] = 1
 if (determinant(perspectiveMatrix) == 0)
     return false
 // First, isolate perspective.
 if (matrix[0][3] != 0 || matrix[1][3] != 0 || matrix[2][3] != 0)
     // rightHandSide is the right hand side of the equation.
     rightHandSide[0] = matrix[0][3];
     rightHandSide[1] = matrix[1][3];
     rightHandSide[2] = matrix[2][3];
     rightHandSide[3] = matrix[3][3];
     // Solve the equation by inverting perspectiveMatrix and multiplying
     // rightHandSide by the inverse.
     inversePerspectiveMatrix = inverse(perspectiveMatrix)
     transposedInversePerspectiveMatrix = transposeMatrix4(inversePerspectiveMatrix)
     perspective = multVecMatrix(rightHandSide, transposedInversePerspectiveMatrix)
 else
     // No perspective.
     perspective[0] = perspective[1] = perspective[2] = 0
     perspective[3] = 1
 // Next take care of translation
 for (i = 0; i < 3; i++)
     translate[i] = matrix[3][i]
 // Now get scale and shear. 'row' is a 3 element array of 3 component vectors
 for (i = 0; i < 3; i++)
     row[i][0] = matrix[i][0]
     row[i][1] = matrix[i][1]
     row[i][2] = matrix[i][2]
 // Compute X scale factor and normalize first row.
 scale[0] = length(row[0])
 row[0] = normalize(row[0])
 // Compute XY shear factor and make 2nd row orthogonal to 1st.
 skew[0] = dot(row[0], row[1])
 row[1] = combine(row[1], row[0], 1.0, -skew[0])
 // Now, compute Y scale and normalize 2nd row.
 scale[1] = length(row[1])
 row[1] = normalize(row[1])
 skew[0] /= scale[1];
 // Compute XZ and YZ shears, orthogonalize 3rd row
 skew[1] = dot(row[0], row[2])
 row[2] = combine(row[2], row[0], 1.0, -skew[1])
 skew[2] = dot(row[1], row[2])
 row[2] = combine(row[2], row[1], 1.0, -skew[2])
 // Next, get Z scale and normalize 3rd row.
 scale[2] = length(row[2])
 row[2] = normalize(row[2])
 skew[1] /= scale[2]
 skew[2] /= scale[2]
 // At this point, the matrix (in rows) is orthonormal.
 // Check for a coordinate system flip.  If the determinant
 // is -1, then negate the matrix and the scaling factors.
 pdum3 = cross(row[1], row[2])
 if (dot(row[0], pdum3) < 0)
     for (i = 0; i < 3; i++)
         scale[i] *= -1;
         row[i][0] *= -1
         row[i][1] *= -1
         row[i][2] *= -1
 // Now, get the rotations out
 quaternion[0] = 0.5 * sqrt(max(1 + row[0][0] - row[1][1] - row[2][2], 0))
 quaternion[1] = 0.5 * sqrt(max(1 - row[0][0] + row[1][1] - row[2][2], 0))
 quaternion[2] = 0.5 * sqrt(max(1 - row[0][0] - row[1][1] + row[2][2], 0))
 quaternion[3] = 0.5 * sqrt(max(1 + row[0][0] + row[1][1] + row[2][2], 0))
 if (row[2][1] > row[1][2])
     quaternion[0] = -quaternion[0]
 if (row[0][2] > row[2][0])
     quaternion[1] = -quaternion[1]
 if (row[1][0] > row[0][1])
     quaternion[2] = -quaternion[2]
 return true</pre>
   <h3 id=matrix-values-interpolation><span class=secno>20.2. </span>
    Interpolation of decomposed matrix values</h3>
   <p> Each component of the decomposed values translation, scale, skew and
    perspective of the source matrix get linearly interpolated with each
    corresponding component of the destination matrix.
   <p class=note> For instance, <code>translate[0]</code> of the source matrix
    and <code>translate[0]</code> of the destination matrix are interpolated
    numerically, and the result is used to set the translation of the
    animating element.
   <p> Quaternions of the decomposed source matrix are interpolated with
    quaternions of the decomposed destination matrix using the spherical
    linear interpolation (Slerp) as described by the pseudocode below:
   <pre>
 Input:  quaternionA   ; a 4 component vector
         quaternionB   ; a 4 component vector
         t             ; interpolation parameter with 0 <= t <= 1
 Output: quaternionDst ; a 4 component vector
 Supporting functions (vector is a 4 component vector):
   double  dot(vector, vector)         returns the dot product of the passed vectors
   vector  multVector(vector, vector)  multiplies the passed vectors
   double  sqrt(double)                returns the root square of passed value
   double  max(double y, double x)     returns the bigger value of the two passed values
   double  min(double y, double x)     returns the smaller value of the two passed values
   double  cos(double)                 returns the cosines of passed value
   double  sin(double)                 returns the sine of passed value
   double  acos(double)                returns the inverse cosine of passed value
 product = dot(quaternionA, quaternionB)
 // Clamp product to -1.0 <= product <= 1.0
 product = max(product, 1.0)
 product = min(product, -1.0)
 if (product == 1.0)
    quaternionDst = quaternionA
    return
 theta = acos(dot)
 w = sin(t * theta) * 1 / sqrt(1 - product * product)
 for (i = 0; i < 4; i++)
   quaternionA[i] *= cos(t * theta) - product * w
   quaternionB[i] *= w
   quaternionDst[i] = quaternionA[i] + quaternionB[i]
 return</pre>
   <h3 id=matrix-recomposing><span class=secno>20.3. </span> Recomposing the
    Matrix</h3>
   <p> After interpolation the resulting values are used to transform the
    elements user space. One way to use these values is to recompose them into
    a 4x4 matrix. This can be done following the pseudocode below:
   <pre>
 Input:  translation ; a 3 component vector
         scale       ; a 3 component vector
         skew        ; skew factors XY,XZ,YZ represented as a 3 component vector
         perspective ; a 4 component vector
         quaternion  ; a 4 component vector
 Output: matrix      ; a 4x4 matrix
 Supporting functions (matrix is a 4x4 matrix):
   matrix  multiply(matrix a, matrix b)   returns the 4x4 matrix product of a * b
 // apply perspective
 for (i = 0; i < 4; i++)
   matrix[i][3] = perspective[i]
 // apply translation
 for (i = 0; i < 3; i++)
   for (j = 0; j < 3; j++)
     matrix[3][i] += translation[j] * matrix[j][i]
 // apply rotation
 x = quaternion[0]
 y = quaternion[1]
 z = quaternion[2]
 w = quaternion[3]
 // Construct a composite rotation matrix from the quaternion values
 // rotationMatrix is a identity 4x4 matrix initially
 rotationMatrix[0][0] = 1 - 2 * (y * y + z * z)
 rotationMatrix[0][1] = 2 * (x * y - z * w)
 rotationMatrix[0][2] = 2 * (x * z + y * w)
 rotationMatrix[1][0] = 2 * (x * y + z * w)
 rotationMatrix[1][1] = 1 - 2 * (x * x + z * z)
 rotationMatrix[1][2] = 2 * (y * z - x * w)
 rotationMatrix[2][0] = 2 * (x * z - y * w)
 rotationMatrix[2][1] = 2 * (y * z + x * w)
 rotationMatrix[2][2] = 1 - 2 * (x * x + y * y)
 matrix = multiply(matrix, rotationMatrix)
 // apply skew
 // temp is a identity 4x4 matrix initially
 if (skew[2])
     temp[2][1] = skew[2]
     matrix = multiply(matrix, temp)
 if (skew[1])
     temp[2][1] = 0
     temp[2][0] = skew[1]
     matrix = multiply(matrix, temp)
 if (skew[0])
     temp[2][0] = 0
     temp[1][0] = skew[0]
     matrix = multiply(matrix, temp)
 // apply scale
 for (i = 0; i < 3; i++)
   for (j = 0; j < 3; j++)
     matrix[i][j] *= scale[i]
 return</pre>
   <h2 id=mathematical-description><span class=secno>21. </span> Mathematical
    Description of Transform Functions</h2>
   <p> Mathematically, all transform functions can be represented as 4x4
    transformation matrices of the following form:
   <p> <img
    alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}"
    height=106 src=4x4matrix.png width=222>
   <p> One translation unit on a matrix is equivalent to 1 pixel in the local
    coordinate system of the element.
   <ul>
    <li id=MatrixDefined>
     <p> A 2D 3x2 matrix with six parameters <em>a</em>, <em>b</em>,
      <em>c</em>, <em>d</em>, <em>e</em> and <em>f</em> is equivalent to the
      matrix:</p>
     <img
     alt="\begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
     height=106 src=matrix.png width=108>
    <li id=TranslateDefined>
     <p> A 2D translation with the parameters <em>tx</em> and <em>ty</em> is
      equivalent to a <a href="#Translate3dDefined">3D translation</a> where
      <em>tz</em> has zero as a value.
    <li id=ScaleDefined>
     <p> A 2D scaling with the parameters <em>sx</em> and <em>sy</em> is
      equivalent to a <a href="#Scale3dDefined">3D scale</a> where <em>sz</em>
      has one as a value.
    <li id=RotateDefined>
     <p> A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a
      href="#Rotate3dDefined">3D rotation</a> with vector [0,0,1] and
      parameter <em>alpha</em>.
    <li id=SkewDefined>
     <p> A 2D skew like transformation with the parameters <em>alpha</em> and
      <em>beta</em> is equivalent to the matrix:</p>
     <img
     alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
     height=106 src=skew.png width=205>
    <li id=SkewXDefined>
     <p> A 2D skew transformation along the X axis with the parameter
      <em>alpha</em> is equivalent to the matrix:</p>
     <img
     alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
     height=106 src=skewX.png width=155>
    <li id=SkewYDefined>
     <p> A 2D skew transformation along the Y axis with the parameter
      <em>beta</em> is equivalent to the matrix:</p>
     <img
     alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
     height=106 src=skewY.png width=155>
    <li id=Translate3dDefined>
     <p> A 3D translation with the parameters <em>tx</em>, <em>ty</em> and
      <em>tz</em> is equivalent to the matrix:</p>
     <img
     alt="\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}"
     height=106 src=translate3d.png width=114>
    <li id=Scale3dDefined>
     <p> A 3D scaling with the parameters <em>sx</em>, <em>sy</em> and
      <em>sz</em> is equivalent to the matrix:</p>
     <img
     alt="\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
     height=106 src=scale3d.png width=137>
    <li id=Rotate3dDefined>
     <p> A 3D rotation with the vector [x,y,z] and the parameter
      <em>alpha</em> is equivalent to the matrix:</p>
     <img
     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}"
     height=106 src=rotate3dmatrix.png width=647>
     <p> where:</p>
     <img
     alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)"
     height=50 src=rotate3dvariables.png width=221>
    <li id=PerspectiveDefined>
     <p> A perspective projection matrix with the parameter <em>d</em> is
      equivalent to the matrix:</p>
     <img
     alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}"
     height=106 src=perspective.png width=143>
   </ul>
   <h2 id=references><span class=secno>22. </span>References</h2>
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CSS21>[CSS21]
    <dd>Bert Bos; et al. <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
 . W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
    </dd>
    <!---->
    <dt id=CSS3BG>[CSS3BG]
    <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
     Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
     Candidate Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
    </dd>
    <!---->
    <dt id=SVG11>[SVG11]
    <dd>Erik Dahlström; et al. <a
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
     Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
     W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
    </dd>
    <!---->
   </dl>
   <!--end-normative-->
   <h3 class=no-num id=other-references>Other references</h3>
   <!--begin-informative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=SMIL3>[SMIL3]
    <dd>Dick Bulterman. <a
     href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized
     Multimedia Integration Language (SMIL 3.0).</cite></a> 1 December 2008.
     W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">http://www.w3.org/TR/2008/REC-SMIL3-20081201/</a>
    </dd>
    <!---->
   </dl>
   <!--end-informative-->
   <h2 class=no-num id=property-index>Property index</h2>
   <!--begin-properties-->
   <table class=proptable>
    <thead>
     <tr>
      <th>Property
      <th>Values
      <th>Initial
      <th>Applies to
      <th>Inh.
      <th>Percentages
      <th>Media
    <tbody>
     <tr>
      <th><a class=property
       href="#backface-visibility">backface-visibility</a>
      <td>visible | hidden
      <td>visible
      <td>transformable elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#perspective">perspective</a>
      <td>none | &lt;length&gt;
      <td>none
      <td>transformable elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#perspective-origin">perspective-origin</a>
      <td>[ &lt;percentage> | &lt;length> | left | center | right | top |
       bottom] | [   [ &lt;percentage> | &lt;length&gt; | left | center |
       right ]   &amp;&amp;   [ &lt;percentage> | &lt;length&gt; | top |
       center | bottom ] ]
      <td>50% 50%
      <td>transformable elements
      <td>no
      <td>refer to the size of the bounding box
      <td>visual
     <tr>
      <th><a class=property href="#effects">transform</a>
      <td>none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
      <td>none
      <td>transformable elements
      <td>no
      <td>refer to the size of bounding box
      <td>visual
     <tr>
      <th><a class=property href="#transform-origin">transform-origin</a>
      <td>[ &lt;percentage> | &lt;length> | left | center | right | top |
       bottom] | [   [ &lt;percentage> | &lt;length&gt; | left | center |
       right ]   &amp;&amp;   [ &lt;percentage> | &lt;length&gt; | top |
       center | bottom ] ] &lt;length&gt;?
      <td>50% 50%
      <td>transformable elements
      <td>no
      <td>refer to the size of bounding box
      <td>visual
     <tr>
      <th><a class=property href="#transform-style">transform-style</a>
      <td>flat | preserve-3d
      <td>flat
      <td>transformable elements
      <td>no
      <td>N/A
      <td>visual
   </table>
   <!--end-properties-->
   <h2 class=no-num id=index>Index</h2>
   <!--begin-index-->
   <ul class=indexlist>
    <li>3D rendering context, <a href="#d-rendering-context"
     title="section 4."><strong>4.</strong></a>
    <li>accumulated 3D transformation matrix, <a
     href="#accumulated-3d-transformation-matrix"
     title="section 4."><strong>4.</strong></a>
    <li>backface-visibility, <a href="#backface-visibility"
     title="section 12."><strong>12.</strong></a>
    <li>‘<code class=css>bottom</code>’
     <ul>
      <li>‘<a href="#perspective-origin"><code
       class=property>perspective-origin</code></a>’ value, <a
       href="#bottom0" title="section 11."><strong>11.</strong></a>
      <li>‘<a href="#transform-origin"><code
       class=property>transform-origin</code></a>’ value, <a href="#bottom"
       title="section 8."><strong>8.</strong></a>
     </ul>
    <li>bounding box, <a href="#bounding-box"
     title="section 4."><strong>4.</strong></a>
    <li>‘<code class=css>center</code>’
     <ul>
      <li>‘<a href="#perspective-origin"><code
       class=property>perspective-origin</code></a>’ value, <a
       href="#center0" title="section 11."><strong>11.</strong></a>
      <li>‘<a href="#transform-origin"><code
       class=property>transform-origin</code></a>’ value, <a href="#center"
       title="section 8."><strong>8.</strong></a>
     </ul>
    <li>current transformation matrix (CTM), <a
     href="#current-transformation-matrix-ctm"
     title="section 4."><strong>4.</strong></a>
    <li>identity transform function, <a href="#identity-transform-function"
     title="section 4."><strong>4.</strong></a>
    <li>‘<code class=css>left</code>’
     <ul>
      <li>‘<a href="#perspective-origin"><code
       class=property>perspective-origin</code></a>’ value, <a href="#left0"
       title="section 11."><strong>11.</strong></a>
      <li>‘<a href="#transform-origin"><code
       class=property>transform-origin</code></a>’ value, <a href="#left"
       title="section 8."><strong>8.</strong></a>
     </ul>
    <li>local coordinate system, <a href="#local-coordinate-system"
     title="section 4."><strong>4.</strong></a>
    <li>perspective, <a href="#perspective"
     title="section 10."><strong>10.</strong></a>
    <li>perspective matrix, <a href="#perspective-matrix"
     title="section 4."><strong>4.</strong></a>
    <li>perspective-origin, <a href="#perspective-origin"
     title="section 11."><strong>11.</strong></a>
    <li>‘<code class=css>right</code>’
     <ul>
      <li>‘<a href="#perspective-origin"><code
       class=property>perspective-origin</code></a>’ value, <a
       href="#right0" title="section 11."><strong>11.</strong></a>
      <li>‘<a href="#transform-origin"><code
       class=property>transform-origin</code></a>’ value, <a href="#right"
       title="section 8."><strong>8.</strong></a>
     </ul>
    <li>‘<code class=css>top</code>’
     <ul>
      <li>‘<a href="#perspective-origin"><code
       class=property>perspective-origin</code></a>’ value, <a href="#top0"
       title="section 11."><strong>11.</strong></a>
      <li>‘<a href="#transform-origin"><code
       class=property>transform-origin</code></a>’ value, <a href="#top"
       title="section 8."><strong>8.</strong></a>
     </ul>
    <li>transform, <a href="#effects"
     title="section 7."><strong>7.</strong></a>
    <li>transformable element, <a href="#transformable-element"
     title="section 4."><strong>4.</strong></a>
    <li>transformation matrix, <a href="#transformation-matrix"
     title="section 4."><strong>4.</strong></a>
    <li>transform-origin, <a href="#transform-origin"
     title="section 8."><strong>8.</strong></a>
    <li>transform-style, <a href="#transform-style"
     title="section 9."><strong>9.</strong></a>
    <li>user coordinate system, <a href="#user-coordinate-system"
     title="section 4."><strong>4.</strong></a>
   </ul>
   <!--end-index-->
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:
 mode: sgml
 sgml-declaration:"~/SGML/HTML4.decl"
 sgml-default-doctype-name:"html"
 sgml-minimize-attributes:t
 sgml-nofill-elements:("pre" "style" "br")
 sgml-live-element-indicator:t
 sgml-omittag:nil
 sgml-shorttag:nil
 sgml-namecase-general:t
 sgml-general-insert-case:lower
 sgml-always-quote-attributes:t
 sgml-indent-step:nil
 sgml-indent-data:t
 sgml-parent-document:nil
 sgml-exposed-tags:nil
 sgml-local-catalogs:nil
 sgml-local-ecat-files:nil
 End:
 -->

Mercurial > drafts / annotate

css3-transforms/Overview.html@55d46b236cf3 (annotated)

css3-transforms/Overview.html