-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-transformations.html
152 lines (124 loc) · 7.46 KB
/
css-transformations.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 3 🔷 CSS Transformations</title>
<!--Favicon-->
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon\apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="CSS-TTA" />
<link rel="manifest" href="favicon\site.webmanifest" />
<!--Fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--Styles-->
<link rel="stylesheet" href="css/normalize-fwd.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/css-transformations.css">
<script src="global.js" defer></script>
<script src="transform.js" defer></script>
<body>
<!-- [0] Overlay (w/ Hamburger Onclick) [DON'T TOUCH] -->
<div class="overlay" id="menuOverlay">
<div class="overlay-content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="css-transformations.html">Transformations</a></li>
<li><a href="css-animations.html">Animations</a></li>
</ul>
</div>
</div>
<main>
<!-- [0] Header & Navigation [DON'T TOUCH] -->
<header>
<nav>
<p class="logo">CSS-TTA</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="css-transformations.html">Transformations</a></li>
<li><a href="css-animations.html">Animations</a></li>
</ul>
<!-- [0] Hamburger Menu [DON'T TOUCH] -->
<svg id="hamburger-menu" class="ham ham3" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('active')">
<path class="line top" d="m 70,33 h -40 c -11.092231,0 11.883874,13.496726 -3.420361,12.956839 -0.962502,-2.089471 -2.222071,-3.282996 -4.545687,-3.282996 -2.323616,0 -5.113897,2.622752 -5.113897,7.071068 0,4.448316 2.080609,7.007933 5.555839,7.007933 2.401943,0 2.96769,-1.283974 4.166879,-3.282995 2.209342,0.273823 4.031294,1.642466 5.857227,-0.252538 v -13.005715 16.288404 h 7.653568" />
<path class="line middle" d="m 70,50 h -40 c -5.6862,0 -8.534259,5.373483 -8.534259,11.551069 0,7.187738 3.499166,10.922274 13.131984,10.922274 11.021777,0 7.022787,-15.773343 15.531095,-15.773343 3.268142,0 5.177031,-2.159429 5.177031,-6.7 0,-4.540571 -1.766442,-7.33533 -5.087851,-7.326157 -3.321409,0.0092 -5.771288,2.789632 -5.771288,7.326157 0,4.536525 2.478983,6.805271 5.771288,6.7" />
<path class="line bottom" d="m 70,67 h -40 c 0,0 -3.680675,0.737051 -3.660714,-3.517857 0.02541,-5.415597 3.391687,-10.357143 10.982142,-10.357143 4.048418,0 17.88928,0.178572 23.482143,0.178572 0,2.563604 2.451177,3.403635 4.642857,3.392857 2.19168,-0.01078 4.373905,-1.369814 4.375,-3.392857 0.0011,-2.023043 -1.924401,-2.589191 -4.553571,-4.107143 -2.62917,-1.517952 -4.196429,-1.799562 -4.196429,-3.660714 0,-1.861153 2.442181,-3.118811 4.196429,-3.035715 1.754248,0.0831 4.375,0.890841 4.375,3.125 2.628634,0 6.160714,0.267857 6.160714,0.267857 l -0.178571,-2.946428 10.178571,0 -10.178571,0 v 6.696428 l 8.928571,0 -8.928571,0 v 7.142858 l 10.178571,0 -10.178571,0" />
</svg>
</nav>
</header>
<!-- [1] Transformation Content (Your Content) -->
<section class="intro">
<h1>CSS Transformations</h1>
<h2>◇ What are the CSS Transformations?</h2>
<p>CSS transformations are a way of changing the appearance or position of the elements on the web page
without affecting the layout of other elements. The transformations can be applied using the CSS
"transform" property, allowing for effects such as scaling, rotating, skewing or translating (shifting)
the elements.
</p>
<h2>◇ Why use transformations, and where?</h2>
<p>Transformations can be used to create dynamic effects to enhance UX and interactivity of the website.
For example, rotating a card, or having the buttons change size when hovered over. They involve less
performance overhead than using JavaScript-based manipulations. They can also be combined to create more
complex effects.
</p>
</section>
<section class="translation-section">
<h2>Translate</h2>
<div class="row">
<div id="green1" class="green square"></div>
<div id="red1" class="red square"></div>
</div>
<button id="translate-button">transform: translate(120px, -50%);</button>
<p>Shift the element to the right by 120 pixels and up by 50 percent of the height.</p>
</section>
<section class="skew-section">
<h2>Skew</h2>
<div class="row">
<div id="green" class="green square"></div>
<div id="red2" class="red square"></div>
</div>
<button id="skewX-button">transform: skewX(15deg);</button>
<button id="skewY-button">transform: skewY(15deg);</button>
<button id="skewXY-button">transform: skew(15deg, 15deg);</button>
<p>Tilt the element to the left by 15 degrees, or down by 15 degrees, or both at the same time.</p>
</section>
<section class="scale-section">
<h2>Scale</h2>
<div class="row">
<div id="green" class="green square"></div>
<div id="red3" class="red square"></div>
</div>
<button id="scale-button">transform: scale(2, 0.5);</button>
<p>Make the element twice as wide and half as tall.</p>
</section>
<section class="rotate-section">
<h2>Rotate</h2>
<div class="row">
<div id="green" class="green square"></div>
<div id="red4" class="red square"></div>
</div>
<button id="rotate-button1">transform: rotate(45deg);</button>
<button id="rotate-button2">transform: rotate(-0.125turn);</button>
<p>Rotate the element left or right by 45 degress (or, equivalently, by 1/8 of a turn).</p>
</section>
<section class="matrix-section">
<h2>Matrix</h2>
<div class="row">
<div id="green" class="green square"></div>
<div id="red5" class="red square"></div>
</div>
<button id="matrix-button">transform: matrix(2, 0, 1, 0.5, 0, 20);</button>
<p>Combine transform: scale(2, 0.5); transform: skew(45deg, 0), and transform: translate(0px, 20px)
into a single operation.
</p>
</section>
<footer></footer>
</main>
</body>
</html>