-
Notifications
You must be signed in to change notification settings - Fork 708
/
Copy pathOverview.bs
135 lines (111 loc) · 4.8 KB
/
Overview.bs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<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: 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.
</pre>
<pre class="link-defaults">
spec:css-2d-transforms-1;
type:property;
text:transform
text:transform-origin
type:dfn;
text: transformation matrix
text: transformable element
</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: none | <<length-percentage>> [ <<length-percentage>> <<length>>? ]?
Initial: none
Applies to: <a>transformable elements</a>
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: none | <<number>>{3}? <<angle>>
Initial: none
Applies to: <a>transformable elements</a>
Inherited: no
Media: visual
Animatable: as SLERP
</pre>
<pre class="propdef">
Name: scale
Value: none | <<number>>{1,3}
Initial: none
Applies to: <a>transformable elements</a>
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''.
All three properties accept
(and default to)
the value <dfn value for="translate, rotate, scale">none</dfn>,
which produces no transform at all.
In particular,
this value does <em>not</em> 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 <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>