CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.
This is a delta spec over CSS Transforms Level 1, while that spec is finishing standardization.
CSS is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.
Status of this document
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.
The (archived) public mailing list
www-style@w3.org
(see instructions)
is preferred for discussion of this specification.
When sending e-mail,
please put the text “css-transforms” in the subject,
preferably like this:
“[css-transforms] …summary of comment…”
The translate, rotate, and scale properties
allow authors to specify simple transforms independently,
in a way that maps to typical user interface usage,
rather than having to remember the order in transform
that keeps the actions of transform(), rotate() and scale()
independent and acting in screen coordinates.
The translate property accepts 1-3 values,
each specifying a translation against one axis,
in the order X, Y, then Z.
Unspecified translations default to 0px.
The rotate property accepts an angle to rotate an element,
and optionally an axis to rotate it around,
specified as the X, Y, and Z lengths of an origin-anchored vector.
If the axis is unspecified,
it defaults to 0 0 1,
causing a "2d rotation" in the plane of the screen.
The scale property accepts 1-3 values,
each specifying a scale along one axis,
in order X, Y, then Z.
Unspecified scales default to 1.
Translate by the computed X, Y, and Z values of transform-origin.
Translate by the computed X, Y, and Z values of translate.
Rotate by the computed <angle> about the specified axis of rotate.
Scale by the computed X, Y, and Z values of scale.
Translate and rotate by the transform specified by motion.
Multiply by each of the transform functions in transform from left to right.
Translate by the negated computed X, Y and Z values of transform-origin.
4. SVG and 3D transform functions additions
Even if the vector-effect property has values extended by [SVG2] and an object is within a 3D rendering context the property has no affect on rendering the object.
6. Mathematical Description of Transform Functions additions
Scale of one scalar value scale2D which the coordinate system itself has is defined by the following formulas:
And the following equation holds among sx, sy and scale2D. Accordingly, when transformation matrix is provided by scale() with one parameter, scale2D is equal to absolute value of that parameter.
Scale of one scalar value scale3D which the coordinate system itself has is defined by the following formulas:
And the following equation holds among sx, sy, sz and scale3D.
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words "MUST",
"MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. [RFC2119]
Examples in this specification are introduced with the words "for example"
or are set apart from the normative text with class="example",
like this:
This is an example of an informative example.
Informative notes begin with the word "Note" and are set apart from the
normative text with class="note", like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with <strong class="advisement">, like
this:
UAs MUST provide an accessible alternative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers must
treat as invalid (and ignore
as appropriate) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents must not selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Experimental implementations
To avoid clashes with future CSS features, the CSS2.1 specification
reserves a prefixed
syntax for proprietary and experimental extensions to CSS.
Prior to a specification reaching the Candidate Recommendation stage
in the W3C process, all implementations of a CSS feature are considered
experimental. The CSS Working Group recommends that implementations
use a vendor-prefixed syntax for such features, including those in
W3C Working Drafts. This avoids incompatibilities with future changes
in the draft.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
