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: Theresa 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.

spec:css-2d-transforms-1;
	type:property; 
		text:transform
		text:transform-origin
	type:dfn; 
		text: transformation matrix
		text: transformable element
Introduction {#intro} ===================== Introduction here. Individual Transform Properties: the 'translate', 'scale', and 'rotate' properties {#individual-transforms} =========================================================================================================== Fluff here. 
Name: translate
Value: none | <> [ <> <>? ]?
Initial: none
Applies to: transformable elements
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 <> or <> list

Name: rotate
Value: none | <>{3}? <>
Initial: none
Applies to: transformable elements
Inherited: no
Media: visual
Animatable: as SLERP

Name: scale
Value: none | <>{1,3}
Initial: none
Applies to: transformable elements
Inherited: no
Media: visual
Animatable: as <> list
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''. All three properties accept (and default to) the value none, which produces no transform at all. In particular, this value does not trigger the creation of a stacking context or containing block, while all other values (including identity transforms like ''translate: 0px'') create a stacking context and containing block, per usual for transforms. Current Transformation Matrix {#ctm} ==================================== The transformation matrix 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 <> 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 https://lists.w3.org/Archives/Public/www-style/2015Mar/0371.html, 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. Formula is defined here.