Overview.bs

<pre class='metadata'>
Title: CSS Transform Module Level 2
Shortname: css-transforms
Level: 1
Status: ED
Work Status: Exploring
Group: fxtf
ED: https://drafts.csswg.org/css-transforms-2/
Editor: Tab Atkins Jr., Google Inc http://google.com, http://xanthir.com/contact/
Editor: Simon Fraser, Apple Inc http://www.apple.com/, simon.fraser@apple.com
Editor: Dean Jackson, Apple Inc http://www.apple.com/, dino@apple.com
Editor: Edward O'Connor, Apple Inc http://www.apple.com/, eoconnor@apple.com
Editor: Dirk Schulze, Adobe Systems Inc http://www.adobe.com/, dschulze@adobe.com
Abstract: CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.
Abstract:
Abstract: This is a delta spec over CSS Transforms Level 1, while that spec is finishing standardization.
</pre>

<pre class="link-defaults">
spec:css-2d-transforms-1;
	type:property; text:transform
	type:dfn; text: transformation matrix
</pre>

<!-- WTF, why does Bikeshed only shows these as existing the TR-level obsolete css-2d-transforms-1 draft? -->

Introduction {#intro}
=====================

Introduction here.


Individual Transform Properties: the 'translate', 'scale', and 'rotate' properties {#individual-transforms}
===========================================================================================================

Fluff here.

<pre class="propdef">
Name: translate
Value: [ <<length>> | <<percentage>> ] [[ <<length>> | <<percentage>> ] <<length>>? ]?
Initial: 0
Inherited: no
Percentages: relative to the width of the containing block (for the first value) or the height (for the second value)
Media: visual
Computed Value: as specified, with lengths made absolute
Animatable: as <<length>> or <<percentage>> list
</pre>

<pre class="propdef">
Name: rotate
Value: <<angle>> <<number>>{3}?
Initial: 0deg
Inherited: no
Media: visual
Animatable: as SLERP
</pre>

<pre class="propdef">
Name: scale
Value: <<number>>{1,3}
Initial: 1
Inherited: no
Media: visual
Animatable: as <<number>> list
</pre>

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


Current Transformation Matrix {#ctm}
====================================

The <a>transformation matrix</a> computation is amended to the following:

The transformation matrix is computed from the 'transform', 'transform-origin', 'translate', 'rotate', 'scale', and 'motion' properties as follows:

1. Start with the identity matrix.
2. Translate by the computed X, Y, and Z values of 'transform-origin'.
3. Translate by the computed X, Y, and Z values of 'translate'.
4. Rotate by the computed <<angle>> about the specified axis of 'rotate'.
5. Scale by the computed X, Y, and Z values of 'scale'.
6. Translate and rotate by the transform specified by 'motion'.
7. Multiply by each of the transform functions in 'transform' from left to right.
8. Translate by the negated computed X, Y and Z values of 'transform-origin'.



More Issues {#more-issues}
==========================

Issue: Per <a href="https://lists.w3.org/Archives/Public/www-style/2015Mar/0371.html">https://lists.w3.org/Archives/Public/www-style/2015Mar/0371.html</a>,
the WG resolved to add a formula for decomposing a transform into a unified "scale"
(the spec already defines how to decompose it into scaleX/Y/Z),
for use by things like SVG's non-scaling stroke spec.
<a href="https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Specifying_decomposition_of_scale">Formula is defined here.</a>