-
-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathindex.html
457 lines (414 loc) · 31.6 KB
/
index.html
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>CSS Transform Functions Visualizer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="description" content="CSS3 2D / 3D Transform Functions Visualizer and Playground" />
<meta name="keywords" content="CSS, CSS3, 2D, 3D, functions, transform, csstransform" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@alterebro" />
<meta name="twitter:creator" content="@alterebro" />
<meta name="twitter:title" content="CSS Transform" />
<meta name="twitter:description" content="CSS3 2D / 3D Transform Functions Visualizer and Playground" />
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/alterebro/css-transform/media/css-transform.jpg" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="moro.es" />
<meta property="og:title" content="CSS Transform" />
<meta property="og:description" content="CSS3 2D / 3D Transform Functions Visualizer and Playground" />
<meta property="og:url" content="https://css-transform.moro.es/" />
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/alterebro/css-transform/media/css-transform.jpg" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#1a1718" />
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="app" v-bind:class="{ 'with-sidebar' : sidebar }">
<header>
<h1><a href="https://css-transform.moro.es">CSS3 Transform</a></h1>
<p>2D & 3D CSS Transform functions visualizer</p>
<hr />
</header>
<section id="do">
<a id="open" @click.prevent="openSidebar" href="#sidebar"><em>≡</em></a>
<a id="close" @click.prevent="closeSidebar" href="#main"><em>×</em></a>
</section>
<aside id="sidebar">
<form action="/" method="post">
<fieldset>
<legend>Property Settings</legend>
<dl>
<!-- Rotate 2D -->
<dt>
<label for="rotate-2d" class="checkboxed">
<input type="checkbox" id="rotate-2d" v-model="rotate2Dactive" />
<strong>Rotate 2D</strong>
</label>
<a href="#info-rotate-2d">Info</a>
</dt>
<dd>
<label for="rotate-2d-range">rotate (2D)</label>
<input type="range" id="rotate-2d-range" v-model="rotate2D" min="0" max="359" step="1" />
<code v-text="rotate2D + 'deg'">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomRotate2D" class="btn-random">Random</button>
<button type="button" @click="resetRotate2D" class="btn-reset">Reset</button>
</dd>
<!-- Rotate 3D -->
<dt>
<label for="rotate-3d" class="checkboxed">
<input type="checkbox" id="rotate-3d" v-model="rotate3Dactive" />
<strong>Rotate 3D</strong>
</label>
<a href="#info-rotate-3d">Info</a>
</dt>
<dd>
<label for="rotate-3d-range-x">rotate (x)</label>
<input type="range" id="rotate-3d-range-x" v-model="rotateX" min="0" max="359" step="1" />
<code v-text="rotateX + 'deg'">—</code>
</dd>
<dd>
<label for="rotate-3d-range-y">rotate (y)</label>
<input type="range" id="rotate-3d-range-y" v-model="rotateY" min="0" max="359" step="1" />
<code v-text="rotateY + 'deg'">—</code>
</dd>
<dd>
<label for="rotate-3d-range-z">rotate (z)</label>
<input type="range" id="rotate-3d-range-z" v-model="rotateZ" min="0" max="359" step="1" />
<code v-text="rotateZ + 'deg'">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomRotate3D" class="btn-random">Random</button>
<button type="button" @click="resetRotate3D" class="btn-reset">Reset</button>
</dd>
<!-- Perspective -->
<dt>
<label for="perspective" class="checkboxed">
<input type="checkbox" id="perspective" v-model="perspectiveActive" />
<strong>Perspective</strong>
</label>
<a href="#info-perspective">Info</a>
</dt>
<dd>
<label for="perspective-range">perspective</label>
<input type="range" id="perspective-range" v-model="perspective" min="300" max="2300" step="100" />
<code v-text="perspective">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomPerspective" class="btn-random">Random</button>
<button type="button" @click="resetPerspective" class="btn-reset">Reset</button>
</dd>
<!-- Transform Origin -->
<dt>
<label for="transform-origin" class="checkboxed">
<input type="checkbox" id="transform-origin" v-model="transformOriginActive" />
<strong>Transform Origin</strong>
</label>
<a href="#info-transform-origin">Info</a>
</dt>
<dd>
<label for="transform-x-range">transform-origin (x)</label>
<input type="range" id="transform-x-range" v-model="transformOriginX" min="0" max="100" step="1" />
<code v-text="transformOriginX + '%'">—</code>
</dd>
<dd>
<label for="transform-y-range">transform-origin (y)</label>
<input type="range" id="transform-y-range" v-model="transformOriginY" min="0" max="100" step="1" />
<code v-text="transformOriginY + '%'">—</code>
</dd>
<dd>
<label for="transform-z-range">transform-origin (z)</label>
<input type="range" id="transform-z-range" v-model="transformOriginZ" min="-250" max="250" step="10" />
<code v-text="transformOriginZ + 'px'">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomTransformOrigin" class="btn-random">Random</button>
<button type="button" @click="resetTransformOrigin" class="btn-reset">Reset</button>
</dd>
<!-- Scale -->
<dt>
<label for="scale" class="checkboxed">
<input type="checkbox" id="scale" v-model="scaleActive" />
<strong>Scale</strong>
</label>
<a href="#info-scale">Info</a>
</dt>
<dd>
<label for="scale-range">scale</label>
<input type="range" id="scale-range" v-model="scale" min="0.5" max="2" step=".1" />
<code v-text="scale">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomScale" class="btn-random">Random</button>
<button type="button" @click="resetScale" class="btn-reset">Reset</button>
</dd>
<!-- Translate -->
<dt>
<label for="translate" class="checkboxed">
<input type="checkbox" id="translate" v-model="translateActive" />
<strong>Translate</strong>
</label>
<a href="#info-translate">Info</a>
</dt>
<dd>
<label for="translate-x-range">translate-x</label>
<input type="range" id="translate-x-range" v-model="translateX" min="-100" max="100" step="10" />
<code v-text="translateX">—</code>
</dd>
<dd>
<label for="translate-y-range">translate-y</label>
<input type="range" id="translate-y-range" v-model="translateY" min="-100" max="100" step="10" />
<code v-text="translateY">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomTranslate" class="btn-random">Random</button>
<button type="button" @click="resetTranslate" class="btn-reset">Reset</button>
</dd>
<!-- Skew -->
<dt>
<label for="skew" class="checkboxed">
<input type="checkbox" id="skew" v-model="skewActive" />
<strong>Skew</strong>
</label>
<a href="#info-skew">Info</a>
</dt>
<dd>
<label for="skew-x-range">skew-x</label>
<input type="range" id="skew-x-range" v-model="skewX" min="0" max="180" step="1" />
<code v-text="skewX">—</code>
</dd>
<dd>
<label for="skew-y-range">skew-y</label>
<input type="range" id="skew-y-range" v-model="skewY" min="0" max="180" step="1" />
<code v-text="skewY">—</code>
</dd>
<dd class="buttons">
<button type="button" @click="randomSkew" class="btn-random">Random</button>
<button type="button" @click="resetSkew" class="btn-reset">Reset</button>
</dd>
</dl>
</fieldset>
<hr />
<fieldset>
<legend>All Elements</legend>
<p>
<button type="button" @click="randomAll" class="btn-random">Random</button>
<button type="button" @click="resetAll" class="btn-reset">Reset</button>
<button type="button" @click="activateAll(true)" class="btn-on">Activate</button>
<button type="button" @click="activateAll(false)" class="btn-off">Deactivate</button>
</p>
</fieldset>
</form>
<hr />
</aside>
<main id="main">
<div id="box">
<div id="alpha" v-bind:style="{ 'transform' : styleClass.transform, 'transform-origin' : styleClass.transformOrigin }">
<div class="alpha-panel" v-bind:class="{ 'active' : isActivated }" id="alpha-front"><strong>Front</strong></div>
<div class="alpha-panel" v-bind:class="{ 'active' : isActivated }" id="alpha-back"><strong>Back</strong></div>
</div>
</div>
<hr />
</main>
<article>
<section id="info-rotate-2d">
<h2>Rotation (2D)</h2>
<h3><code>rotate()</code> <small>Rotates an element around a fixed point on the 2D plane.</small></h3>
<p>The <code>rotate()</code> CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. The amount of rotation created by <code>rotate()</code> is specified by an <em>angle value</em> expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. (A rotation by 180° is called point reflection.)</p>
<p>The axis of rotation passes through an origin, defined by the <code>transform-origin</code> CSS property.</p>
<p> — <em>More info: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate" target="_blank">developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate</a></em></p>
<hr />
</section>
<section id="info-rotate-3d">
<h2>Rotation (3D)</h2>
<details open>
<summary>
<h3><code>rotateX()</code> <small>Rotates an element around the horizontal axis.</small></h3>
</summary>
<p>The <code>rotateX()</code> CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. The amount of rotation created by <code>rotateX()</code> is specified by an <em>angle value</em> expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
<p>The axis of rotation passes through an origin, defined by the transform-origin CSS property.</p>
<blockquote><p><em><code>rotateX(a)</code> is equivalent to <code>rotate3d(1, 0, 0, a)</code>.</em></p></blockquote>
<p> — <em>More info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX" target="_blank">developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX</a></em></p>
</details>
<details>
<summary>
<h3><code>rotateY()</code> <small>Rotates an element around the vertical axis.</small></h3>
</summary>
<p>The <code>rotateY()</code> CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. The amount of rotation created by rotateY() is specified by an <em>angle value</em> expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
<p>The axis of rotation passes through an origin, defined by the transform-origin CSS property.</p>
<blockquote><p><em><code>rotateY(a)</code> is equivalent to <code>rotate3d(0, 1, 0, a)</code>.</em></p></blockquote>
<p> — <em>More info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY" target="_blank">developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY</a></em></p>
</details>
<details>
<summary>
<h3><code>rotateZ()</code> <small>Rotates an element around the z-axis.</small></h3>
</summary>
<p>The <code>rotateZ()</code> CSS function defines a transformation that rotates an element around the z-axis without deforming it.</p>
<p>The amount of rotation created by rotateZ() is specified by an <em>angle value</em> expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p>
<p>The axis of rotation passes through an origin, defined by the transform-origin CSS property.</p>
<blockquote><p><em><code>rotateZ(a)</code> is equivalent to <code>rotate(a)</code> or <code>rotate3d(0, 0, 1, a)</code>.</em></p></blockquote>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ</a></em></p>
</details>
<hr />
</section>
<section id="info-perspective">
<h2>Perspective</h2>
<h3><code>perspective()</code> <small>Sets the distance between the user and the z=0 plane.</small></h3>
<p>The <code>perspective()</code> CSS function defines a transformation that sets the distance between the user and the z=0 plane.</p>
<p>The perspective distance used by <code>perspective()</code> is specified by a <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">length</a></em> value (a number followed by a length unit: em, rem, px, pt, mm…), which represents the distance between the user and the z=0 plane. A positive value makes the element appear closer to the user, a negative value farther.</p>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective</a></em></p>
<hr />
</section>
<section id="info-transform-origin">
<h2>Transform Origin</h2>
<h3><code>transform-origin()</code> <small>Sets the origin for an element's transformations.</small></h3>
<p>The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the <code>rotate()</code> function is the center of rotation.</p>
<p>The <code>transform-origin</code> property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.</p>
<p>If two or more values are defined and either no value is a keyword, or the only used keyword is <code>center</code>, then the first value represents the horizontal offset and the second represents the vertical offset.</p>
<ul>
<li><strong>One-value syntax:</strong> The value must be a <em>length</em>, a <em>percentage</em>, or one of the keywords <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, and <code>bottom</code>.</li>
<li><strong>Two-value syntax:</strong> One value must be a <em>length</em>, a <em>percentage</em>, or one of the keywords <code>left</code>, <code>center</code>, and <code>right</code>. The other value must be a <em>length</em>, a <em>percentage</em>, or one of the keywords <code>top</code>, <code>center</code>, and <code>bottom</code>.</li>
<li><strong>Three-value syntax:</strong> The first two values are the same as for the two-value syntax. The third value must be a <em>length</em>. It always represents the <code>Z offset</code>.</li>
</ul>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin</a></em></p>
<hr />
</section>
<section id="info-scale">
<h2>Scaling (Resizing)</h2>
<details open>
<summary>
<h3><code>scale()</code> <small>Scales an element up or down on the 2D plane.</small></h3>
</summary>
<p>The <code>scale()</code> CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales.</p>
<p>This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).</p>
<p>When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect.</p>
<blockquote><p><em>The <code>scale()</code> function only scales in 2D. To scale in 3D, use <code>scale3d()</code> instead.</em></p></blockquote>
<p>The <code>scale()</code> function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.</p>
<div><pre><code class="language-css">scale(sx)
scale(sx, sy)
/*
- sx : A number representing the abscissa of the scaling vector.
- sy : A number representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.
*/</code></pre></div>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale</a></em></p>
</details>
<details>
<summary>
<h3><code>scaleX()</code> <small>Scales an element up or down horizontally.</small></h3>
</summary>
<p>The <code>scaleX()</code> CSS function defines a transformation that resizes an element along the x-axis (horizontally).</p>
<p>It modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the <code>transform-origin</code> property).</p>
<blockquote><p><em><code>scaleX(sx)</code> is equivalent to <code>scale(sx, 1)</code> or <code>scale3d(sx, 1, 1)</code>.</em></p></blockquote>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX</a></em></p>
</details>
<details>
<summary>
<h3><code>scaleY()</code> <small>Scales an element up or down vertically.</small></h3>
</summary>
<p>The <code>scaleY()</code> CSS function defines a transformation that resizes an element along the y-axis (vertically).</p>
<p>It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property).</p>
<blockquote><p><em><code>scaleY(sy)</code> is equivalent to <code>scale(1, sy)</code> or <code>scale3d(1, sy, 1)</code>.</em></p></blockquote>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY</a></em></p>
</details>
<hr />
</section>
<section id="info-translate">
<h2>Translation (Moving)</h2>
<details open>
<summary>
<h3><code>translate()</code> <small>Translates an element on the 2D plane.</small></h3>
</summary>
<p>The <code>translate()</code> CSS function repositions an element in the horizontal and/or vertical directions.</p>
<p>This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.</p>
<p>The <code>translate()</code> function is specified as either one or two values.</p>
<div><pre><code class="language-css">translate(tx)
translate(tx, ty)
/*
- tx : Is a length value representing the abscissa (x-coordinate) of the translating vector.
- ty : Is a length value representing the ordinate of the translating vector (or y-coordinate). If unspecified, its default value is 0. For example, translate(2) is equivalent to translate(2, 0).
*/</code></pre></div>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate</a></em></p>
</details>
<details>
<summary>
<h3><code>translateX()</code> <small>Translates an element horizontally.</small></h3>
</summary>
<p>The <code>translateX()</code> CSS function repositions an element horizontally on the 2D plane.</p>
<p>Syntax : <code>translateX(t)</code>. <em>(<code>t</code> is a length value representing the abscissa of the translating vector.)</em></p>
<blockquote><p><code>translateX(tx)</code> is equivalent to <code>translate(tx, 0)</code> or <code>translate3d(tx, 0, 0)</code>.</p></blockquote>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX</a></em></p>
</details>
<details>
<summary>
<h3><code>translateY()</code> <small>Translates an element vertically.</small></h3>
</summary>
<p>The <code>translateY()</code> CSS function repositions an element vertically on the 2D plane. </p>
<blockquote><p><code>translateY(ty)</code> is equivalent to <code>translate(0, ty)</code> or <code>translate3d(0, ty, 0)</code>.</p></blockquote>
<p>Syntax : <code>translateY(t)</code>. <em>(<code>t</code> is a length value representing the ordinate of the translating vector.)</em></p>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY</a></em></p>
</details>
<hr />
</section>
<section id="info-skew">
<h2>Skewing (Distortion)</h2>
<details open>
<summary>
<h3><code>skew()</code> <small>Skews an element on the 2D plane.</small></h3>
</summary>
<p>The skew() CSS function defines a transformation that skews an element on the 2D plane.</p>
<p>This transformation is a shear mapping (<a href="https://en.wikipedia.org/wiki/Shear_mapping" target="_blank">transvection</a>) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.</p>
<p>The skew() function is specified with either one or two values, which represent the amount of skewing to be applied in each direction.</p>
<div><pre><code class="language-css">skew(ax)
skew(ax, ay)
/*
- ax : Is an angle value expressed in degrees, gradians, radians, or turns; representing the angle to use to distort the element along the abscissa.
- ay : Is an angle value expressed in degrees, gradians, radians, or turns; representing the angle to use to distort the element along the ordinate. If not defined, its default value is 0, resulting in a purely horizontal skewing.
*/</code></pre></div>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew</a></em></p>
</details>
<details>
<summary>
<h3><code>skewX()</code> : <small>Skews an element in the horizontal direction.</small></h3>
</summary>
<p>The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane.</p>
<p>This transformation is a shear mapping (<a href="https://en.wikipedia.org/wiki/Shear_mapping">transvection</a>) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.</p>
<blockquote><p><em><code>skewX(a)</code> is equivalent to <code>skew(a)</code>.</em></p></blockquote>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX</a></em></p>
</details>
<details>
<summary>
<h3><code>skewY()</code> <small>Skews an element in the vertical direction.</small></h3>
</summary>
<p>The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane.</p>
<p>This transformation is a shear mapping (<a href="https://en.wikipedia.org/wiki/Shear_mapping">transvection</a>) that distorts each point within an element by a certain angle in the vertical direction. The ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.</p>
<p> — <em>More Info : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY</a></em></p>
</details>
<hr />
</section>
<p><a href="#app">Close</a></p>
</article>
<footer>
<dl>
<dt v-bind:class="{ 'visible' : cssOutput }" @click="toggleCSSOutput">CSS Output</dt>
<dd v-bind:class="{ 'visible' : cssOutput }">
<pre v-if="hasStyle"><code>{{ styleObject | stringOutput }}</code></pre>
<pre v-else><code>element {
/* No styling applied yet */
}</code></pre>
</dd>
</dl>
<p>
A project created by <strong>Jorge Moreno <a href="https://twitter.com/alterebro" title="Jorge Moreno, @alterebro. UI Developer" target="_blank">@alterebro</a></strong>
<br /><a href="https://github.com/alterebro/css-transform" title="alterebro/css-transform repository" target="_blank">Source Code on GitHub</a> — © 2019 <strong><a href="https://moro.es" title="Jorge Moreno, Moro. Front End Web Developer + UI Designer" target="_blank">www.moro.es</a></strong>
</p>
</footer>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/chain-timeout/dist/chain-timeout.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>