index.html 44.5 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head>
  <title>CSS 2D Transforms</title>
  <link href=default.css rel=stylesheet type="text/css">

  <style type="text/css">
    .rhs { white-space: pre-wrap; }
    code { font-size: inherit; }
    #box-shadow-samples td { background: white; color: black; }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=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 2D Transforms</h1>

   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 15 December
    2011</h2>

   <dl>
    <dt>This version:

    <dd> <a
     href="http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/"><!--http://dev.w3.org/csswg/css3-2d-transforms/-->
     http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/</a>

    <dt>Latest version:

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


    <dt>Previous version:

    <dd><a href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/">
     http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/</a>

    <dt id=editors-list>Editors:

    <dd>Simon Fraser (<a href="http://www.apple.com/">Apple Inc</a>)
     &lt;simon.fraser &#64;apple.com&gt;

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

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

    <dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>)
     &lt;cmarrin &#64;apple.com&gt;

    <dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>)
     &lt;eoconnor &#64;apple.com&gt;
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym
    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
    <a href="http://www.keio.ac.jp/">Keio</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 2D Transforms allows elements rendered by CSS to be transformed in
   two-dimensional space.

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

  <p class=note> This will be the last published Working Draft of this
   specification. Work will continue with a combined CSS and SVG Transforms
   specification operating under the FX Taskforce. The latest <a
   href="http://dev.w3.org/csswg/css3-transforms/"> Editors' Draft</a> of the
   new specification is available.</p>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@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 &#8220;css3-2d-transforms&#8221; in the subject, preferably like
   this: &#8220;[<!---->css3-2d-transforms<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <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>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 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</a> made in
   connection with the deliverables of the group; that page also includes
   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
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <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="#transform-property"><span class=secno>2. </span> The <span
    class=prop-name>&lsquo;<code
    class=property>transform</code>&rsquo;</span> Property </a>

   <li><a href="#transform-origin-property"><span class=secno>3. </span> The
    <span class=prop-name>&lsquo;<code
    class=property>transform-origin</code>&rsquo;</span> Property </a>

   <li><a href="#transform-functions"><span class=secno>4. </span> The
    Transformation Functions </a>

   <li><a href="#transform-values"><span class=secno>5. </span> Transform
    Values and Lists </a>

   <li><a href="#animation"><span class=secno>6. </span> Transitions and
    animations between transform values </a>

   <li><a href="#matrix-decomposition"><span class=secno>7. </span> Matrix
    decomposition for animation </a>
    <ul class=toc>
     <li><a href="#unmatrix"><span class=secno>7.1. </span>Unmatrix</a>

     <li><a href="#animating-the-components"><span class=secno>7.2.
      </span>Animating the components</a>

     <li><a href="#recomposing-the-matrix"><span class=secno>7.3.
      </span>Recomposing the matrix</a>
    </ul>

   <li><a href="#dom-interfaces"><span class=secno>8. </span> DOM Interfaces
    </a>
    <ul class=toc>
     <li><a href="#cssmatrix-interface"><span class=secno>8.1. </span>
      CSSMatrix </a>
    </ul>

   <li><a href="#references"><span class=secno>9. </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/CSS2/visuren.html">visual
   formatting model</a> describes a coordinate system within which each
   element is positioned. Positions and sizes in this coordinate space can be
   thought of as being expressed in pixels, starting in the upper left corner
   of the parent with positive values proceeding to the right and down.

  <p> This coordinate space can be modified with the <span
   class=prop-name>&lsquo;<a href="#effects"><code
   class=property>transform</code></a>&rsquo;</span> property. Using
   transform, elements can be translated, rotated and scaled in two
   dimensional space. The coordinate space behaves as described in the <a
   href="http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">coordinate
   system transformations</a> section of the SVG 1.1 specification. This is a
   coordinate system with two axes: the X axis increases horizontally to the
   right; the Y axis increases vertically downwards.

  <p> Transforms apply to block-level and atomic inline-level elements, but
   do not apply to elements which may be split into multiple inline-level
   boxes.

  <p> Specifying a value other than &lsquo;<code
   class=property>none</code>&rsquo; for the <span class=prop-name>&lsquo;<a
   href="#effects"><code class=property>transform</code></a>&rsquo;</span>
   property establishes a new <em>local coordinate system</em> at the element
   that it is applied to. 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 <span class=prop-name>&lsquo;<a href="#effects"><code
   class=property>transform</code></a>&rsquo;</span> properties of its
   ancestors as well as any local transform applied to it. The accumulation
   of these transforms defines a <em>current transformation matrix (CTM)</em>
   for the element.

  <p> The transform property does not affect the flow of the content
   surrounding the transformed element. However, the value of the overflow
   area takes into account transformed elements. This behavior is similar to
   what happens when elements are translated via relative positioning.
   Therefore, if the value of the <span class=prop-name>&lsquo;<code
   class=property>overflow</code>&rsquo;</span> property is <span
   class=prop-value>&lsquo;<code class=property>scroll</code>&rsquo;</span>
   or <span class=prop-value>&lsquo;<code
   class=property>auto</code>&rsquo;</span>, scrollbars will appear as needed
   to see content that is transformed outside the visible area.

  <p> Any value other than &lsquo;<code class=property>none</code>&rsquo; 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.

  <div class=issue> There are two roles for transformations in layout: (1)
   transformations that adjust the position of the affected content without
   changing the normal layout of that content (much like relative
   positioning) and (2) transformation of the content prior to layout that
   affects the layout of that content. See <a
   href="http://lists.w3.org/Archives/Public/www-style/2007Oct/0209">http://lists.w3.org/Archives/Public/www-style/2007Oct/0209</a>
   for examples of both cases. The "transform" property (as defined in this
   document) is equally useful for both roles. This document is focused on
   satisfying the first role. There is, however, an architectural question
   that arises because there needs to be a way to distinguish which role an
   author of a stylesheet wants. The key question is which is the default
   behavior/role for the "transform" property and how is the other
   behavior/role indicated by a stylesheet author. If you have an opinion on
   this topic, please send feedback.</div>

  <div class=issue> What do fixed backgrounds do in transforms? They should
   probably ignore the transform completely, since - even transformed - the
   object should be acting as "porthole" through which the fixed background
   can be viewed in its original form.</div>

  <div class=issue> This property should also be applicable to SVG elements.</div>

  <div class=issue> We also need to specify that SVG transforms *do* combine
   with this transform, e.g., if a &lt;foreignObject&gt; is inside
   transformed SVG and then defines a transform of its own. This means we may
   potentially have to examine the current SVG transform and combine with it
   to set the correct transform.</div>
  <!-- ======================================================================================================= -->

  <h2 id=transform-property><span class=secno>2. </span> The <span
   class=prop-name>&lsquo;<a href="#effects"><code
   class=property>transform</code></a>&rsquo;</span> Property</h2>

  <p> A two-dimensional transformation is applied to the coordinate system an
   element renders in through the <span class=prop-name>&lsquo;<a
   href="#effects"><code class=property>transform</code></a>&rsquo;</span>
   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 (either defined in
   this specification or by reference to the SVG specification), 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&nbsp;to:</em>

     <td> block-level and atomic inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> refer to the size of the element's border box

    <tr>
     <td> <em>Media:</em>

     <td> visual

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

     <td> Same as specified value.
  </table>
  <!-- ======================================================================================================= -->

  <h2 id=transform-origin-property><span class=secno>3. </span> The <span
   class=prop-name>&lsquo;<a href="#transform-origin"><code
   class=property>transform-origin</code></a>&rsquo;</span> Property</h2>

  <p> The <span class=prop-name>&lsquo;<a href="#transform-origin"><code
   class=property>transform-origin</code></a>&rsquo;</span> property
   establishes the origin of transformation for a coordinate system. This
   property is applied by first translating the element's coordinate system
   by the negated value of the property, then applying the local transform,
   then translating by the property value. This effectively moves the desired
   transformation origin of the element to (0,0) in the local coordinate
   system, then applies the local transform, then moves the element back to
   its original position.

  <p>If only one value is specified, the second value is assumed to be
   &lsquo;<code class=property>center</code>&rsquo;. If two values are given
   and at least one value is not a keyword, then the first value represents
   the horizontal position (or offset) and the second represents the vertical
   position (or offset). <var>&lt;percentage&gt;</var> and
   <var>&lt;length&gt;</var> values here represent an offset of the transform
   origin from the top left corner of the element's border box.

  <p>If three or four values are given, then each
   <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var> represents an
   offset and must be preceded by a keyword, which specifies from which edge
   the offset is given. For example, &lsquo;<code class=css>transform-origin:
   bottom 10px right 20px</code>&rsquo; represents a &lsquo;<code
   class=css>10px</code>&rsquo; vertical offset up from the bottom edge and a
   &lsquo;<code class=css>20px</code>&rsquo; horizontal offset leftward from
   the right edge. If three values are given, the missing offset is assumed
   to be zero.

  <p>Positive values represent an offset <em>inward</em> from the edge of the
   border box. Negative values represent an offset <em>outward</em> from the
   edge of the border box.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

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

    <tr>
     <td> <em>Value:</em>

     <td> [ top | bottom ] |<br>
      [ &lt;percentage> | &lt;length&gt; | left | center | right ] [
      &lt;percentage> | &lt;length&gt; | top | center | bottom ]? |<br>
      [ center | [ left | right ] [ &lt;percentage> | &lt;length&gt; ]? ]
      &amp;&amp; [ center | [ top | bottom ] [ &lt;percentage> |
      &lt;length&gt; ]? ]<br>

    <tr>
     <td> <em>Initial:</em>

     <td> 50% 50%

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and atomic inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> refer to the size of the element's border box

    <tr>
     <td> <em>Media:</em>

     <td> visual

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

     <td> For &lt;length&gt; the absolute value, otherwise a percentage
  </table>
  <!-- ======================================================================================================= -->

  <h2 id=transform-functions><span class=secno>4. </span> The Transformation
   Functions</h2>

  <p> The value of the <a class=prop-name href="#effects">transform</a>
   property is a list of &lt;transform-functions&gt; applied in the order
   provided. The individual transform functions are separated by whitespace.
   The set of allowed transform functions is given below. In this list the
   type &lt;translation-value&gt; is defined as a &lt;length&gt; or
   &lt;percentage&gt; value, and the &lt;angle&gt; type is defined by <a
   href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>

  <dl>
   <dt> <span class=prop-value>matrix(&lt;number&gt;, &lt;number&gt;,
    &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</span>

   <dd> specifies a 2D transformation in the form of a <a
    href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation
    matrix</a> of six values. <span
    class=prop-value>matrix(a,b,c,d,e,f)</span> is equivalent to applying the
    transformation matrix <strong>[a b c d e f]</strong>.

   <dt> <span class=prop-value>translate(&lt;translation-value&gt;[,
    &lt;translation-value&gt;])</span>

   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">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> <span class=prop-value>translateX(&lt;translation-value&gt;)</span>

   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
    by the given amount in the X direction.

   <dt> <span class=prop-value>translateY(&lt;translation-value&gt;)</span>

   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
    by the given amount in the Y direction.

   <dt> <span class=prop-value>scale(&lt;number&gt;[, &lt;number&gt;])</span>


   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a>
    operation by the [sx,sy] scaling vector described by the 2 parameters. If
    the second parameter is not provided, it is 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> <span class=prop-value>scaleX(&lt;number&gt;)</span>

   <dd> specifies a scale operation using the [sx,1] scaling vector, where sx
    is given as the parameter.

   <dt> <span class=prop-value>scaleY(&lt;number&gt;)</span>

   <dd> specifies a scale operation using the [1,sy] scaling vector, where sy
    is given as the parameter.

   <dt> <span class=prop-value>rotate(&lt;angle&gt;)</span>

   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
    rotation</a> by the angle specified in the parameter about the origin of
    the element, as defined by the <a
    href="#transform-origin"><em>transform-origin</em></a> property. For
    example, rotate(90deg) would cause elements to appear rotated one-quarter
    of a turn in the clockwise direction.

   <dt> <span class=prop-value>skewX(&lt;angle&gt;)</span>

   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
    transformation along the X axis</a> by the given angle.

   <dt> <span class=prop-value>skewY(&lt;angle&gt;)</span>

   <dd> specifies a <a
    href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew
    transformation along the Y axis</a> by the given angle.
  </dl>

  <h2 id=transform-values><span class=secno>5. </span> Transform Values and
   Lists</h2>

  <p> The &lt;translation-value&gt; values are defined as [&lt;percentage&gt;
   | &lt;length&gt;]. All other value types are described <a
   href="http://www.w3.org/TR/CSS2/syndata.html#values">as CSS types</a>. If
   a list of transforms is provided, then the net effect is as if each
   transform 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.

  <div class=example>
   <pre>
  div {
      transform: translate(100px, 100px);
  }
  </pre>
   Move the element by 100 pixels in both the X and Y directions.
   <div class=figure> <img alt="The 100px translation in X and Y"
    src=transform1.png></div>
  </div>

  <div class=example>
   <pre>
  div {
      height: 100px; width: 100px;
      transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  }
  </pre>
   Move the element by 80 pixels in both the X and Y directions, then scale
   the element by 150%, then rotate it 45 degrees clockwise about the Z axis.
   Note that the scale and rotate operate about the center of the element,
   since the element has the default transform-origin of 50% 50%.
   <div class=figure> <img alt="The transform specified above"
    src="compound_transform.png"></div>
  </div>
  <!-- ======================================================================================================= -->

  <h2 id=animation><span class=secno>6. </span> Transitions and animations
   between transform values</h2>

  <p> When animating or transitioning the value of a transform property the
   rules described below are applied. The &lsquo;<code
   class=property>from</code>&rsquo; transform is the transform at the start
   of the transition or current keyframe. The &lsquo;<code
   class=property>end</code>&rsquo; transform is the transform at the end of
   the transition or current keyframe.

  <p class=note> See <a
   href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=14715">the currently
   open issue</a> on what "of the same type" means.

  <ul>
   <li> If the &lsquo;<code class=property>from</code>&rsquo; and
    &lsquo;<code class=property>to</code>&rsquo; transforms are both single
    functions of the same type:
    <ul>
     <li> For translate, translateX, translateY, scale, scaleX, scaleY,
      rotate, skew, skewX and skewY functions:
      <ul>
       <li> the individual components of the function are interpolated
        numerically.
      </ul>

     <li> For matrix:
      <ul>
       <li> the matrix is decomposed using <a
        href="http://tog.acm.org/resources/GraphicsGems/gemsii/unmatrix.c">the
        method described by unmatrix</a> into separate translation, scale,
        rotation and skew matrices, then each decomposed matrix is
        interpolated numerically, and finally combined in order to produce a
        resulting 3x2 matrix.
      </ul>
    </ul>

   <li> If both the &lsquo;<code class=property>from</code>&rsquo; and
    &lsquo;<code class=property>to</code>&rsquo; transforms are "none":
    <ul>
     <li> There is no interpolation necessary
    </ul>

   <li> If one of the &lsquo;<code class=property>from</code>&rsquo; or
    &lsquo;<code class=property>to</code>&rsquo; transforms is "none":
    <ul>
     <li> The &lsquo;<code class=property>none</code>&rsquo; is replaced by
      an equivalent identity function list for the corresponding transform
      function list.
      <p> For example, if the &lsquo;<code class=property>from</code>&rsquo;
       transform is "scale(2)" and the &lsquo;<code
       class=property>to</code>&rsquo; transform is "none" then the value
       "scale(1)" will be used as the &lsquo;<code
       class=property>to</code>&rsquo; value, and animation will proceed
       using the rule above. Similarly, if the &lsquo;<code
       class=property>from</code>&rsquo; transform is "none" and the
       &lsquo;<code class=property>to</code>&rsquo; transform is "scale(2)
       rotate(50deg)" then the animation will execute as if the &lsquo;<code
       class=property>from</code>&rsquo; value is "scale(1) rotate(0)".</p>

      <p> The identity functions are translate(0), translateX(0),
       translateY(0), scale(1), scaleX(1), scaleY(1), rotate(0), skewX(0),
       skewY(0) and matrix(1, 0, 0, 1, 0, 0).</p>
    </ul>

   <li> If both the &lsquo;<code class=property>from</code>&rsquo; and
    &lsquo;<code class=property>to</code>&rsquo; transforms have the same
    number of transform functions and corresponding functions in each
    transform list are of the same type:
    <ul>
     <li> Each transform function is animated with its corresponding
      destination function in isolation using the rules described above. The
      individual values are then applied as a list to produce resulting
      transform value.
    </ul>

   <li> Otherwise:
    <ul>
     <li> The transform function lists are each converted into the equivalent
      matrix value and animation proceeds using the rule for a single
      function above.
    </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.

  <h2 id=matrix-decomposition><span class=secno>7. </span> Matrix
   decomposition for animation</h2>

  <p> When interpolating between 2 matrices, each is decomposed into the
   corresponding translation, rotation, scale and skew 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
   technique below. This technique is taken from The "unmatrix" method in
   "Graphics Gems II, edited by Jim Arvo", simplified for the 2D case.

  <h3 id=unmatrix><span class=secno>7.1. </span>Unmatrix</h3>

  <pre>
  Input:  a, b, c, d ; 2x2 matrix (rotate, scale, shear) components
          tx, ty     ; translation components
  Output: translate  ; a 2 component vector
          rotate     ; an angle
          scale      ; a 2 component vector
          skew       ; skew factor
  Returns false if the matrix cannot be decomposed, true if it can

  Supporting functions (point is a 2 component vector):
    float  length(point)                returns the length of the passed vector
    point  normalize(point)             normalizes the length of the passed point to 1
    float  dot(point, point)            returns the dot product of the passed points
    float  atan2(float y, float x)      returns the principal value of the arc tangent of
                                        y/x, using the signs of both arguments to determine
                                        the quadrant of the return value

  Decomposition also makes use of the following function:
    point combine(point a, point b, float ascl, float bscl)
        result[0] = (ascl * a[0]) + (bscl * b[0])
        result[1] = (ascl * a[1]) + (bscl * b[1])
        return result

  // Make sure the matrix is invertible
  if ((a * d - b * c) == 0)
    return false

  // Take care of translation
  translate[0] = tx
  translate[1] = matrix[3][1]

  // Put the components into a 2x2 matrix 'mat'
  mat[0][0] = a
  mat[0][1] = b
  mat[1][0] = c
  mat[1][1] = d

  // Compute X scale factor and normalize first row.
  scale[0] = length(row[0])
  row[0] = normalize(row[0])

  // Compute shear factor and make 2nd row orthogonal to 1st.
  skew = dot(row[0], row[1])
  row[1] = combine(row[1], row[0], 1.0, -skew)

  // Now, compute Y scale and normalize 2nd row.
  scale[1] = length(row[1])
  row[1] = normalize(row[1])
  skew /= scale[1];

  // Now, get the rotation out
  rotate = atan2(mat[0][1], mat[0][0])

  return true;</pre>

  <h3 id=animating-the-components><span class=secno>7.2. </span>Animating the
   components</h3>

  <p> Once decomposed, each component of each returned value of the source
   matrix is linearly interpolated with the corresponding component of the
   destination matrix. For instance, the translate[0] and translate[1] values
   are interpolated numerically, and the result is used to set the
   translation of the animating element.

  <h3 id=recomposing-the-matrix><span class=secno>7.3. </span>Recomposing the
   matrix</h3>

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

  <p> After interpolation the resulting values are used to position the
   element. One way to use these values is to recompose them into a 3x2
   matrix. This can be done using the Transformation Functions of the <a
   href="#effects"><em>transform</em></a> property. The following JavaScript
   example produces a string for this purpose. The values passed in are the
   output of the Unmatrix function above:

  <pre>
function compose(translate, rotate, scale, skew, elementID)
{
    var s = " translate(" + translate[0] + ", " + translate[1] + ")";
    s += " rotate(" + rotate + ")";
    s += " skewX(" + skew + ")";
    s += " scale(" + scale[0] + ", " + scale[1] + ")";
    document.getElementById(elementID).style.transform = s;
}</pre>

  <h2 id=dom-interfaces><span class=secno>8. </span> DOM Interfaces</h2>

  <p> This section describes the interfaces and functionality added to the
   DOM to support runtime access to the functionality described above.

  <h3 id=cssmatrix-interface><span class=secno>8.1. </span> CSSMatrix</h3>

  <dl>
   <dt> <b>Interface <i><a id=DOM-CSSMatrix
    name=DOM-CSSMatrix>CSSMatrix</a></i></b>

   <dd>
    <p> The <code>CSSMatrix</code> interface represents a 3x2 homogeneous
     matrix.</p>

    <div class=issue> We actually describe a 3x2 matrix here, similar to <a
     href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>.
     </div>

    <dl>
     <dt> <b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
  interface CSSMatrix {
      attribute float a;
      attribute float b;
      attribute float c;
      attribute float d;
      attribute float e;
      attribute float f;

      void        setMatrixValue(in DOMString string) raises(DOMException);
      CSSMatrix   multiply(in CSSMatrix secondMatrix);
      CSSMatrix   inverse() raises(DOMException);
      CSSMatrix   translate(in float x, in float y);
      CSSMatrix   scale(in float scaleX, in float scaleY);
      CSSMatrix   skewX(in float angle);
      CSSMatrix   skewY(in float angle);
      CSSMatrix   rotate(in float angle);
  };</pre>
      </div>
      <br>
     </dd>
     <!-- IDL -->

     <dt> <b>Attributes</b>

     <dd>
      <dl>
       <dt> <code class=attribute-name><a id=DOM-CSSMatrix-matrix
        name=DOM-CSSMatrix-matrix>a-f</a></code> of type <code>float</code>

       <dd> Each of these attributes represents one of the values in the 3x2
        matrix.<br>
      </dl>
     </dd>
     <!-- Attributes -->

     <dt> <b>Methods</b>

     <dd>
      <dl><!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-setMatrixValue
        name=DOM-CSSMatrix-setMatrixValue>setMatrixValue</a></code>

       <dd>
        <div class=method> The <code>setMatrixValue</code> method replaces
         the existing matrix with one computed from parsing the passed string
         as though it had been assigned to the transform property in a CSS
         style rule.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>string</code> of type
             <code>DOMString</code>

            <dd> The string to parse.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>No Return Value</b></div>

         <div> <b>Exceptions</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>DOMException SYNTAX_ERR</code>

            <dd> Thrown when the provided string can not be parsed into a
             CSSMatrix.
           </dl>
          </div>
         </div>
        </div>
       </dd>
       <!-- setMatrixValue -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-multiply
        name=DOM-CSSMatrix-multiply>multiply</a></code>

       <dd>
        <div class=method> The <code>multiply</code> method returns a new
         CSSMatrix which is the result of this matrix multiplied by the
         passed matrix, with the passed matrix to the right. This matrix is
         not modified.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>secondMatrix</code> of type
             <code>CSSMatrix</code>

            <dd> The matrix to multiply.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The result matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
       </dd>
       <!-- multiply() -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-inverse
        name=DOM-CSSMatrix-inverse>inverse</a></code>

       <dd>
        <div class=method> The <code>inverse</code> method returns a new
         matrix which is the inverse of this matrix. This matrix is not
         modified.
         <div class=parameters> <b>No Parameters</b></div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The inverted matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>Exceptions</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>DOMException NOT_SUPPORTED_ERR</code>

            <dd> Thrown when the CSSMatrix can not be inverted.
           </dl>
          </div>
         </div>
        </div>
        <!-- ======================================================================================================= -->
        </dd>
       <!-- inverse() -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-translate
        name=DOM-CSSMatrix-translate>translate</a></code>

       <dd>
        <div class=method> The <code>translate</code> method returns a new
         matrix which is this matrix multiplied by a translation matrix
         containing the passed values. This matrix is not modified.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>x</code> of type
             <code>float</code>

            <dd> The X component of the translation value.<br>

            <dt> <code class=parameter-name>y</code> of type
             <code>float</code>

            <dd> The Y component of the translation value.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The result matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->
        </dd>
       <!-- translate() -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-scale
        name=DOM-CSSMatrix-scale>scale</a></code>

       <dd>
        <div class=method> The <code>scale</code> method returns a new matrix
         which is this matrix multiplied by a scale matrix containing the
         passed values. If the y component is undefined, the x component
         value is used in its place. This matrix is not modified.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>scaleX</code> of type
             <code>float</code>

            <dd> The X component of the scale value.<br>

            <dt> <code class=parameter-name>scaleY</code> of type
             <code>float</code>

            <dd> The (optional) Y component of the scale value.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The result matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->
        </dd>
       <!-- scale() -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-rotate
        name=DOM-CSSMatrix-rotate>rotate</a></code>

       <dd>
        <div class=method> The <code>rotate</code> method returns a new
         matrix which is this matrix multiplied by a <a
         href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">rotation
         matrix</a>. The rotation value is in degrees. This matrix is not
         modified.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>angle</code> of type
             <code>float</code>

            <dd> The angle of rotation.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The result matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->
        </dd>
       <!-- rotate() -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-skew-x
        name=DOM-CSSMatrix-skew-x>skewX</a></code>

       <dd>
        <div class=method> The <code>skewX</code> method returns a new matrix
         which is this matrix multiplied by a matrix representing a <a
         href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew along
         the x-axis</a>. The rotation value is in degrees. This matrix is not
         modified.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>angle</code> of type
             <code>float</code>

            <dd> The angle of skew along the X axis.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The result matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->
        </dd>
       <!-- skewX() -->
       <!-- ===================================================== -->

       <dt> <code class=method-name><a id=DOM-CSSMatrix-skew-y
        name=DOM-CSSMatrix-skew-y>skewY</a></code>

       <dd>
        <div class=method> The <code>skewX</code> method returns a new matrix
         which is this matrix multiplied by a matrix representing a <a
         href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew along
         the y-axis</a>. The rotation value is in degrees. This matrix is not
         modified.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>angle</code> of type
             <code>float</code>

            <dd> The angle of skew along the Y axis.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSMatrix</code>

            <dd> The result matrix.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->
        </dd>
       <!-- skewY() -->
      </dl>
      <!-- methods -->
    </dl>
   </dd>
   <!-- Interface CSSMatrix -->
  </dl>

  <p> In addition to the interface listed above, the
   <code>getComputedStyle</code> method of the <code>Window</code> object has
   been updated. The <a href="#effects"><code>transform</code></a> property
   of the style object returned by <code>getComputedStyle</code> contains a
   DOMString of the form "matrix(a, b, c, d, e, f)" representing the 3x2
   matrix that is the result of applying the individual functions listed in
   the <a href="#effects"><code>transform</code></a> property.

  <h2 id=references><span class=secno>9. </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 -->
    <!---->
  </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 -->
    <!---->
  </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&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><a class=property href="#effects">transform</a>

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

     <td>none

     <td>block-level and atomic inline-level elements

     <td>no

     <td>refer to the size of the element's border box

     <td>visual

    <tr>
     <th><a class=property href="#transform-origin">transform-origin</a>

     <td>[ top | bottom ] | [ &lt;percentage> | &lt;length&gt; | left |
      center | right ] [ &lt;percentage> | &lt;length&gt; | top | center |
      bottom ]? | [ center | [ left | right ] [ &lt;percentage> |
      &lt;length&gt; ]? ] &amp;&amp; [ center | [ top | bottom ] [
      &lt;percentage> | &lt;length&gt; ]? ]

     <td>50% 50%

     <td>block-level and atomic inline-level elements

     <td>no

     <td>refer to the size of the element's border box

     <td>visual
  </table>
  <!--end-properties-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>transform, <a href="#effects" title=transform><strong>2.</strong></a>

   <li>transform-origin, <a href="#transform-origin"
    title=transform-origin><strong>3.</strong></a>
  </ul>
  <!--end-index-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
End:
-->