Skip to content

Commit 1c4f0f9

Browse files
Moazosama2004Moazosama2004
committedApr 25, 2023
16th Assignment about Animation
1 parent bdbf00c commit 1c4f0f9

File tree

2 files changed

+258
-0
lines changed

2 files changed

+258
-0
lines changed
 

‎css_course_assignment/Assignment_16/css/master.css

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
/****************/
2+
/* Assignment 1 */
3+
/****************/
4+
5+
.container-1 h1 {
6+
background-color: #ff5722;
7+
color: white;
8+
width: 150px;
9+
padding: 10px;
10+
text-align: center;
11+
position: relative;
12+
margin: 40px auto;
13+
}
14+
15+
.container-1 h1::after {
16+
content: "";
17+
background-color: inherit;
18+
width: 100%;
19+
height: 100%;
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
z-index: -1;
24+
transform: skewY(15deg);
25+
-webkit-transform: skewY(15deg);
26+
-moz-transform: skewY(15deg);
27+
-ms-transform: skewY(15deg);
28+
-o-transform: skewY(15deg);
29+
}
30+
31+
.container-1 h1::before {
32+
content: "";
33+
background-color: inherit;
34+
width: 100%;
35+
height: 100%;
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
z-index: -1;
40+
transform: skewY(-15deg);
41+
-webkit-transform: skewY(-15deg);
42+
-moz-transform: skewY(-15deg);
43+
-ms-transform: skewY(-15deg);
44+
-o-transform: skewY(-15deg);
45+
}
46+
47+
/****************/
48+
/* Assignment 2 */
49+
/****************/
50+
51+
.container-2 h1 {
52+
background-color: #009688;
53+
color: white;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
position: relative;
58+
margin: 40px auto;
59+
width: 150px;
60+
height: 50px;
61+
padding: 10px;
62+
}
63+
64+
.container-2 h1::after {
65+
content: "";
66+
background-color: inherit;
67+
border-left: 15px solid white;
68+
border-right: 15px solid white;
69+
position: absolute;
70+
top: 0px;
71+
left: -20px;
72+
width: 10px;
73+
height: 100%;
74+
transform: skew(25deg);
75+
-webkit-transform: skew(25deg);
76+
-moz-transform: skew(25deg);
77+
-ms-transform: skew(25deg);
78+
-o-transform: skew(25deg);
79+
}
80+
81+
/****************/
82+
/* Assignment 3 */
83+
/****************/
84+
85+
/* .class {
86+
matrix(3, 0.2679, 0, 3, 20, 100):;
87+
scaleX => 3
88+
skewY => 0.2679
89+
skewX => 0
90+
scaleY => 3
91+
translateX => 20
92+
translateY => 100
93+
} */
94+
95+
/****************/
96+
/* Assignment 4 */
97+
/****************/
98+
99+
.container-4 {
100+
margin-top: 150px;
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
}
105+
106+
.container-4 div {
107+
background-color: #607d8b;
108+
width: 200px;
109+
height: 200px;
110+
border-bottom: 5px solid black;
111+
position: relative;
112+
113+
114+
}
115+
116+
.container-4 div::before {
117+
content: "";
118+
background-color: black;
119+
border: 3px solid white;
120+
width: 69%;
121+
height: 69%;
122+
position: absolute;
123+
top: -72%;
124+
right: -2px;
125+
transform-origin: bottom right;
126+
transform: rotate(-45deg);
127+
-webkit-transform: rotate(-45deg);
128+
-moz-transform: rotate(-45deg);
129+
-ms-transform: rotate(-45deg);
130+
-o-transform: rotate(-45deg);
131+
}
132+
133+
.container-4 div::after {
134+
content: "elzero";
135+
position: absolute;
136+
bottom: 0;
137+
left: 0;
138+
padding: 5px;
139+
text-transform: capitalize;
140+
color: white;
141+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
142+
143+
}
144+
145+
/****************/
146+
/* Assignment 5 */
147+
/****************/
148+
.container-5 {
149+
perspective: 500px;
150+
}
151+
152+
.container-5 div {
153+
width: 200px;
154+
height: 200px;
155+
margin: 50px auto;
156+
position: relative;
157+
transform-style: preserve-3d;
158+
transition: 1s;
159+
-webkit-transition: 1s;
160+
-moz-transition: 1s;
161+
-ms-transition: 1s;
162+
-o-transition: 1s;
163+
}
164+
165+
.container-5 div::after {
166+
content: "front";
167+
background-color: rgb(250 54 100);
168+
169+
170+
}
171+
172+
.container-5 .one::before {
173+
content: "back";
174+
background-color: rgb(22 146 252);
175+
transform: rotateY(180deg);
176+
-webkit-transform: rotateY(180deg);
177+
-moz-transform: rotateY(180deg);
178+
-ms-transform: rotateY(180deg);
179+
-o-transform: rotateY(180deg);
180+
}
181+
182+
.container-5 .two::before {
183+
content: "back";
184+
background-color: rgb(22 146 252);
185+
transform: rotateX(180deg);
186+
-webkit-transform: rotateX(180deg);
187+
-moz-transform: rotateX(180deg);
188+
-ms-transform: rotateX(180deg);
189+
-o-transform: rotateX(180deg);
190+
}
191+
192+
.container-5 div::after ,
193+
.container-5 div::before {
194+
text-transform: capitalize;
195+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
196+
backface-visibility: hidden;
197+
-webkit-backface-visibility: hidden;
198+
position: absolute;
199+
width: 100%;
200+
height: 100%;
201+
display: flex;
202+
justify-content: center;
203+
align-items: center;
204+
font-size: 1.5em;
205+
color: white;
206+
}
207+
208+
.container-5 .one:hover {
209+
transform: rotateY(-180deg);
210+
-webkit-transform: rotateY(-180deg);
211+
-moz-transform: rotateY(-180deg);
212+
-ms-transform: rotateY(-180deg);
213+
-o-transform: rotateY(-180deg);
214+
}
215+
.container-5 .two:hover {
216+
transform: rotateX(-180deg);
217+
-webkit-transform: rotateX(-180deg);
218+
-moz-transform: rotateX(-180deg);
219+
-ms-transform: rotateX(-180deg);
220+
-o-transform: rotateX(-180deg);
221+
}
222+
223+
224+

‎css_course_assignment/Assignment_16/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<link rel="stylesheet" href="css/master.css">
7+
</head>
8+
<body>
9+
<!-- Assignment 1 -->
10+
<div class="container-1">
11+
<h1>Elzero</h1>
12+
</div>
13+
<hr>
14+
<!-- Assignment 2 -->
15+
<div class="container-2">
16+
<h1>Elzero</h1>
17+
</div>
18+
<hr>
19+
<!-- Assignment 3 -->
20+
<!-- done in css file -->
21+
<!-- Assignment 4 -->
22+
<div class="container-4">
23+
<div></div>
24+
</div>
25+
<hr>
26+
<!-- Assignment 5 -->
27+
<div class="container-5">
28+
<div class="one"></div>
29+
<div class="two"></div>
30+
</div>
31+
32+
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.