-
Notifications
You must be signed in to change notification settings - Fork 73
/
css-transforms.json
213 lines (213 loc) · 8.44 KB
/
css-transforms.json
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
{
"spec": {
"title": "CSS Transforms Module Level 1",
"url": "https://drafts.csswg.org/css-transforms-1/"
},
"properties": [
{
"name": "transform",
"href": "https://drafts.csswg.org/css-transforms-1/#propdef-transform",
"value": "none | <transform-list>",
"initial": "none",
"appliesTo": "transformable elements",
"inherited": "no",
"percentages": "refer to the size of reference box",
"computedValue": "as specified, but with lengths made absolute",
"canonicalOrder": "per grammar",
"animationType": "transform list, see interpolation rules",
"values": [
{
"name": "matrix()",
"value": "matrix( <number>#{6} )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-matrix",
"type": "function"
},
{
"name": "translate()",
"value": "translate( <length-percentage> , <length-percentage>? )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translate",
"type": "function"
},
{
"name": "translateX()",
"value": "translateX( <length-percentage> )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translatex",
"type": "function"
},
{
"name": "translateY()",
"value": "translateY( <length-percentage> )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translatey",
"type": "function"
},
{
"name": "scale()",
"value": "scale( <number> , <number>? )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale",
"type": "function"
},
{
"name": "scaleX()",
"value": "scaleX( <number> )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scalex",
"type": "function"
},
{
"name": "scaleY()",
"value": "scaleY( <number> )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scaley",
"type": "function"
},
{
"name": "rotate()",
"value": "rotate( [ <angle> | <zero> ] )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-rotate",
"type": "function"
},
{
"name": "skew()",
"value": "skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-skew",
"type": "function"
},
{
"name": "skewX()",
"value": "skewX( [ <angle> | <zero> ] )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-skewx",
"type": "function"
},
{
"name": "skewY()",
"value": "skewY( [ <angle> | <zero> ] )",
"href": "https://drafts.csswg.org/css-transforms-1/#funcdef-transform-skewy",
"type": "function"
}
],
"styleDeclaration": [
"transform"
]
},
{
"name": "transform-origin",
"href": "https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin",
"value": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [[ center | left | right ] && [ center | top | bottom ]] <length>?",
"initial": "50% 50%",
"appliesTo": "transformable elements",
"inherited": "no",
"percentages": "refer to the size of reference box",
"computedValue": "see background-position",
"canonicalOrder": "per grammar",
"animationType": "by computed value",
"values": [
{
"name": "top",
"prose": "Computes to 0% for the vertical position.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-origin-top",
"type": "value",
"value": "top"
},
{
"name": "right",
"prose": "Computes to 100% for the horizontal position.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-origin-right",
"type": "value",
"value": "right"
},
{
"name": "bottom",
"prose": "Computes to 100% for the vertical position.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-origin-bottom",
"type": "value",
"value": "bottom"
},
{
"name": "left",
"prose": "Computes to 0% for the horizontal position.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-origin-left",
"type": "value",
"value": "left"
},
{
"name": "center",
"prose": "Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-origin-center",
"type": "value",
"value": "center"
}
],
"styleDeclaration": [
"transform-origin",
"transformOrigin"
]
},
{
"name": "transform-box",
"href": "https://drafts.csswg.org/css-transforms-1/#propdef-transform-box",
"value": "content-box | border-box | fill-box | stroke-box | view-box",
"initial": "view-box",
"appliesTo": "transformable elements",
"inherited": "no",
"percentages": "N/A",
"computedValue": "specified keyword",
"canonicalOrder": "per grammar",
"animationType": "discrete",
"values": [
{
"name": "content-box",
"prose": "Uses the content box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-box-content-box",
"type": "value",
"value": "content-box"
},
{
"name": "border-box",
"prose": "Uses the border box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-box-border-box",
"type": "value",
"value": "border-box"
},
{
"name": "fill-box",
"prose": "Uses the object bounding box as reference box.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-box-fill-box",
"type": "value",
"value": "fill-box"
},
{
"name": "stroke-box",
"prose": "Uses the stroke bounding box as reference box.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-box-stroke-box",
"type": "value",
"value": "stroke-box"
},
{
"name": "view-box",
"prose": "Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the SVG viewport creating element: The reference box is positioned at the origin of the coordinate system established by the viewBox attribute. The dimension of the reference box is set to the width and height values of the viewBox attribute.",
"href": "https://drafts.csswg.org/css-transforms-1/#valdef-transform-box-view-box",
"type": "value",
"value": "view-box"
}
],
"styleDeclaration": [
"transform-box",
"transformBox"
]
}
],
"atrules": [],
"selectors": [],
"values": [
{
"name": "<transform-list>",
"href": "https://drafts.csswg.org/css-transforms-1/#typedef-transform-list",
"type": "type",
"value": "<transform-function>+"
},
{
"name": "<transform-function>",
"prose": "The value of the transform property is a list of <transform-function>. The set of allowed transform functions is given below. In the following functions, a <zero> behaves the same as 0deg (\"unitless 0\" angles are preserved for legacy compat). A percentage for horizontal translations is relative to the width of the reference box. A percentage for vertical translations is relative to the height of the reference box.",
"href": "https://drafts.csswg.org/css-transforms-1/#typedef-transform-function",
"type": "type"
}
]
}