You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1223 lines
44 KiB
1223 lines
44 KiB
<!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>)
|
|
<simon.fraser @apple.com>
|
|
|
|
<dd>Dean Jackson (<a href="http://www.apple.com/">Apple Inc</a>) <dino
|
|
@apple.com>
|
|
|
|
<dd>David Hyatt (<a href="http://www.apple.com/">Apple Inc</a>) <hyatt
|
|
@apple.com>
|
|
|
|
<dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>)
|
|
<cmarrin @apple.com>
|
|
|
|
<dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>)
|
|
<eoconnor @apple.com>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</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 “css3-2d-transforms” in the subject, preferably like
|
|
this: “[<!---->css3-2d-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>).
|
|
|
|
<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>‘<code
|
|
class=property>transform</code>’</span> Property </a>
|
|
|
|
<li><a href="#transform-origin-property"><span class=secno>3. </span> The
|
|
<span class=prop-name>‘<code
|
|
class=property>transform-origin</code>’</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>‘<a href="#effects"><code
|
|
class=property>transform</code></a>’</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 ‘<code
|
|
class=property>none</code>’ for the <span class=prop-name>‘<a
|
|
href="#effects"><code class=property>transform</code></a>’</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>‘<a href="#effects"><code
|
|
class=property>transform</code></a>’</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>‘<code
|
|
class=property>overflow</code>’</span> property is <span
|
|
class=prop-value>‘<code class=property>scroll</code>’</span>
|
|
or <span class=prop-value>‘<code
|
|
class=property>auto</code>’</span>, scrollbars will appear as needed
|
|
to see content that is transformed outside the visible area.
|
|
|
|
<p> Any value other than ‘<code class=property>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.
|
|
|
|
<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 <foreignObject> 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>‘<a href="#effects"><code
|
|
class=property>transform</code></a>’</span> Property</h2>
|
|
|
|
<p> A two-dimensional transformation is applied to the coordinate system an
|
|
element renders in through the <span class=prop-name>‘<a
|
|
href="#effects"><code class=property>transform</code></a>’</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 | <transform-function> [ <transform-function> ]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> none
|
|
|
|
<tr>
|
|
<td> <em>Applies 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>‘<a href="#transform-origin"><code
|
|
class=property>transform-origin</code></a>’</span> Property</h2>
|
|
|
|
<p> The <span class=prop-name>‘<a href="#transform-origin"><code
|
|
class=property>transform-origin</code></a>’</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
|
|
‘<code class=property>center</code>’. 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><percentage></var> and
|
|
<var><length></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><percentage></var> or<var><length></var> represents an
|
|
offset and must be preceded by a keyword, which specifies from which edge
|
|
the offset is given. For example, ‘<code class=css>transform-origin:
|
|
bottom 10px right 20px</code>’ represents a ‘<code
|
|
class=css>10px</code>’ vertical offset up from the bottom edge and a
|
|
‘<code class=css>20px</code>’ 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>
|
|
[ <percentage> | <length> | left | center | right ] [
|
|
<percentage> | <length> | top | center | bottom ]? |<br>
|
|
[ center | [ left | right ] [ <percentage> | <length> ]? ]
|
|
&& [ center | [ top | bottom ] [ <percentage> |
|
|
<length> ]? ]<br>
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> 50% 50%
|
|
|
|
<tr>
|
|
<td> <em>Applies 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 <length> 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 <transform-functions> 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 <translation-value> is defined as a <length> or
|
|
<percentage> value, and the <angle> 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(<number>, <number>,
|
|
<number>, <number>, <number>, <number>)</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(<translation-value>[,
|
|
<translation-value>])</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><ty></em> is not provided, ty
|
|
has zero as a value.
|
|
|
|
<dt> <span class=prop-value>translateX(<translation-value>)</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(<translation-value>)</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(<number>[, <number>])</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(<number>)</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(<number>)</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(<angle>)</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(<angle>)</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(<angle>)</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 <translation-value> values are defined as [<percentage>
|
|
| <length>]. 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>
|
|
<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
|
|
</pre>
|
|
|
|
<p> is functionally equivalent to:
|
|
|
|
<pre>
|
|
<div style="transform:translate(-10px,-20px)">
|
|
<div style="transform:scale(2)">
|
|
<div style="transform:rotate(45deg)">
|
|
<div style="transform:translate(5px,10px)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 ‘<code
|
|
class=property>from</code>’ transform is the transform at the start
|
|
of the transition or current keyframe. The ‘<code
|
|
class=property>end</code>’ 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 ‘<code class=property>from</code>’ and
|
|
‘<code class=property>to</code>’ 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 ‘<code class=property>from</code>’ and
|
|
‘<code class=property>to</code>’ transforms are "none":
|
|
<ul>
|
|
<li> There is no interpolation necessary
|
|
</ul>
|
|
|
|
<li> If one of the ‘<code class=property>from</code>’ or
|
|
‘<code class=property>to</code>’ transforms is "none":
|
|
<ul>
|
|
<li> The ‘<code class=property>none</code>’ is replaced by
|
|
an equivalent identity function list for the corresponding transform
|
|
function list.
|
|
<p> For example, if the ‘<code class=property>from</code>’
|
|
transform is "scale(2)" and the ‘<code
|
|
class=property>to</code>’ transform is "none" then the value
|
|
"scale(1)" will be used as the ‘<code
|
|
class=property>to</code>’ value, and animation will proceed
|
|
using the rule above. Similarly, if the ‘<code
|
|
class=property>from</code>’ transform is "none" and the
|
|
‘<code class=property>to</code>’ transform is "scale(2)
|
|
rotate(50deg)" then the animation will execute as if the ‘<code
|
|
class=property>from</code>’ 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 ‘<code class=property>from</code>’ and
|
|
‘<code class=property>to</code>’ 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 to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><a class=property href="#effects">transform</a>
|
|
|
|
<td>none | <transform-function> [ <transform-function> ]*
|
|
|
|
<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 ] | [ <percentage> | <length> | left |
|
|
center | right ] [ <percentage> | <length> | top | center |
|
|
bottom ]? | [ center | [ left | right ] [ <percentage> |
|
|
<length> ]? ] && [ center | [ top | bottom ] [
|
|
<percentage> | <length> ]? ]
|
|
|
|
<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:
|
|
-->
|