Skip to content

Commit fe900df

Browse files
satyam-sethsatyam-seth
committed
add 3d animation demo
1 parent 2e52e9f commit fe900df

File tree

5 files changed

+120
-1
lines changed

5 files changed

+120
-1
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
"[scss]": {
55
"editor.defaultFormatter": "vscode.css-language-features"
66
}
7-
}
7+
}

‎3D animation/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[Web.dev Blog Link](https://dev.to/martinp/how-to-do-stunning-3d-with-pure-htmlcss-ah)
2+
3+
[perspective MDN Doc Link](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)
4+
5+
[transform-style MDN Doc Link](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)

‎3D animation/demo.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>3D Animation</title>
8+
</head>
9+
<body>
10+
<div class="perspective">
11+
<div class="box">
12+
<div class="face top"></div>
13+
<div class="face bottom"></div>
14+
<div class="face back"></div>
15+
<div class="face front"></div>
16+
<div class="face left"></div>
17+
<div class="face right"></div>
18+
</div>
19+
</div>
20+
</body>
21+
</html>

‎3D animation/style.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
width: 100%;
9+
height: 100vh;
10+
display: grid;
11+
place-items: center;
12+
background-color: black;
13+
}
14+
15+
:root {
16+
--size: 100px;
17+
}
18+
19+
.perspective {
20+
position: relative;
21+
perspective: 800px;
22+
perspective-origin: 50% -200px;
23+
}
24+
25+
.box {
26+
width: var(--size);
27+
aspect-ratio: 1;
28+
29+
position: relative;
30+
transform-style: preserve-3d;
31+
32+
transform-origin: 50px bottom -50px;
33+
animation: rotate 4s linear infinite;
34+
}
35+
36+
.face {
37+
position: absolute;
38+
width: var(--size);
39+
aspect-ratio: 1;
40+
41+
transform-style: preserve-3d;
42+
background-color: hsl(39, 100%, var(--lightness));
43+
}
44+
45+
.face.front {
46+
--lightness: 66%;
47+
}
48+
49+
.face.bottom {
50+
--lightness: 74%;
51+
top: 100%;
52+
transform-origin: top;
53+
transform: rotateX(-90deg);
54+
}
55+
56+
.face.top {
57+
--lightness: 74%;
58+
bottom: 100%;
59+
transform-origin: bottom;
60+
transform: rotateX(90deg);
61+
}
62+
63+
.face.back {
64+
--lightness: 78%;
65+
bottom: 200%;
66+
transform-origin: center 150px -50px;
67+
transform: rotateX(180deg);
68+
}
69+
70+
.face.right {
71+
--lightness: 70%;
72+
left: 100%;
73+
transform-origin: left;
74+
transform: rotateY(90deg);
75+
}
76+
77+
.face.left {
78+
--lightness: 70%;
79+
right: 100%;
80+
transform-origin: right;
81+
transform: rotateY(-90deg);
82+
}
83+
84+
@keyframes rotate {
85+
from {
86+
transform: rotate(0);
87+
}
88+
89+
to {
90+
transform: rotateY(360deg);
91+
}
92+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
<a href="./Scratch card effect/demo.html">Scratch card effect</a>
5555
<a href="./Image Sprites/demo.html">Image Sprites</a>
5656
<a href="./BEM(Block, Element Modifier)/demo.html">BEM(Block, Element Modifier)</a>
57+
<a href="./3D animation/demo.html">3D Animation</a>
5758
</body>
5859

5960
</html>

0 commit comments

Comments
 (0)