Skip to content

Commit 70b557a

Browse files
author
padrone1225
committed
add 3D Card using CSS
1 parent db920b7 commit 70b557a

File tree

8 files changed

+164
-0
lines changed

8 files changed

+164
-0
lines changed

‎3D Card/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>SecretariatV-3D card</title>
6+
<link rel="stylesheet" href="./style.css" />
7+
</head>
8+
<body>
9+
<a href="#">
10+
<div class="card">
11+
<div class="wrapper">
12+
<img
13+
src="../src/3D Card/dark_rider-cover.jpg"
14+
alt="cover-image"
15+
class="cover-image"
16+
/>
17+
</div>
18+
<img
19+
src="../src/3D Card/dark_rider-title.png"
20+
alt="title"
21+
class="title"
22+
/>
23+
<img
24+
src="../src/3D Card/dark_rider-character.webp"
25+
alt="character"
26+
class="character"
27+
/>
28+
</div>
29+
</a>
30+
<a href="#">
31+
<div class="card">
32+
<div class="wrapper">
33+
<img
34+
src="../src/3D Card/force_mage-cover.jpg"
35+
alt="cover-image"
36+
class="cover-image"
37+
/>
38+
</div>
39+
<img
40+
src="../src/3D Card/force_mage-title.png"
41+
alt="title"
42+
class="title"
43+
/>
44+
<img
45+
src="../src/3D Card/force_mage-character.webp"
46+
alt="character"
47+
class="character"
48+
/>
49+
</div>
50+
</a>
51+
</body>
52+
</html>

‎3D Card/style.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
:root {
2+
--card-height: 300px;
3+
--card-width: calc(var(--card-height) / 1.5);
4+
--bg-color: #191c29;
5+
}
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
width: 100vw;
12+
height: 100vh;
13+
margin: 0;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
background: var(--bg-color);
18+
}
19+
20+
.card {
21+
width: var(--card-width);
22+
height: var(--card-height);
23+
display: flex;
24+
justify-content: center;
25+
align-items: flex-end;
26+
padding: 0 36px;
27+
margin: 0 50px;
28+
perspective: 2500px;
29+
}
30+
31+
.cover-image {
32+
width: 100%;
33+
height: 100%;
34+
object-fit: cover;
35+
}
36+
37+
.wrapper {
38+
transition: all 0.5s;
39+
position: absolute;
40+
width: 100%;
41+
z-index: -1;
42+
}
43+
44+
.card:hover .wrapper {
45+
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
46+
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
47+
-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
48+
-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
49+
}
50+
51+
.wrapper::before,
52+
.wrapper::after {
53+
content: "";
54+
opacity: 0;
55+
width: 100%;
56+
height: 80px;
57+
transition: all 0.5s;
58+
position: absolute;
59+
left: 0;
60+
}
61+
62+
.wrapper::before {
63+
top: 0;
64+
height: 100%;
65+
background-image: linear-gradient(
66+
to top,
67+
transparent 46%,
68+
rgba(12, 13, 19, 0.5) 68%,
69+
rgba(12, 13, 19) 97%
70+
);
71+
}
72+
73+
.wrapper::after {
74+
bottom: 0;
75+
opacity: 1;
76+
background-image: linear-gradient(
77+
to bottom,
78+
transparent 46%,
79+
rgba(12, 13, 19, 0.5) 68%,
80+
rgba(12, 13, 19) 97%
81+
);
82+
}
83+
84+
.card:hover .wrapper::before {
85+
opacity: 1;
86+
}
87+
88+
.card:hover .wrapper::after {
89+
height: 120px;
90+
}
91+
92+
.title {
93+
width: 100%;
94+
transition: transform 0.5s;
95+
}
96+
97+
.card:hover .title {
98+
transform: translate3d(0%, -50px, 100px);
99+
}
100+
101+
.character {
102+
width: 100%;
103+
opacity: 0;
104+
position: absolute;
105+
transition: 0.5s;
106+
z-index: -1;
107+
}
108+
109+
.card:hover .character {
110+
opacity: 1;
111+
transform: translate3d(0%, -30%, 100px);
112+
}

‎src/3D Card/dark_rider-character.webp

183 KB
Binary file not shown.

‎src/3D Card/dark_rider-cover.jpg

878 KB
Loading

‎src/3D Card/dark_rider-title.png

134 KB
Loading

‎src/3D Card/force_mage-character.webp

810 KB
Binary file not shown.

‎src/3D Card/force_mage-cover.jpg

783 KB
Loading

‎src/3D Card/force_mage-title.png

141 KB
Loading

0 commit comments

Comments
 (0)