Card by kennyotsu

Made by

@kennyotsu

Theme:

Dark

#complex#3d#card

#212121

2.4K views

CSSAdd prefixes

1/*works janky on mobile :<*/
2.container {
3  position: relative;
4  width: 190px;
5  height: 254px;
6  transition: 200ms;
7}
8
9.container:active {
10  width: 180px;
11  height: 245px;
12}
13
14#card {
15  position: absolute;
16  inset: 0;
17  z-index: 0;
18  display: flex;
19  justify-content: center;
20  align-items: center;
21  border-radius: 20px;
22  transition: 700ms;
23  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
24}
25
26.subtitle {
27  transform: translateY(160px);
28  color: rgb(134, 110, 221);
29  text-align: center;
30  width: 100%;
31}
32
33.title {
34  opacity: 0;
35  transition-duration: 300ms;
36  transition-timing-function: ease-in-out-out;
37  transition-delay: 100ms;
38  position: absolute;
39  font-size: x-large;
40  font-weight: bold;
41}
42
43.tracker:hover ~ #card .title {
44  opacity: 1;
45}
46
47#prompt {
48  bottom: 8px;
49  left: 12px;
50  z-index: 20;
51  font-size: 20px;
52  font-weight: bold;
53  transition: 300ms ease-in-out-out;
54  position: absolute;
55  max-width: 110px;
56  color: rgb(255, 255, 255);
57}
58
59.tracker {
60  position: absolute;
61  z-index: 200;
62  width: 100%;
63  height: 100%;
64}
65
66.tracker:hover {
67  cursor: pointer;
68}
69
70.tracker:hover ~ #card #prompt {
71  opacity: 0;
72}
73
74.tracker:hover ~ #card {
75  transition: 300ms;
76  filter: brightness(1.1);
77}
78
79.container:hover #card::before {
80  transition: 200ms;
81  content: '';
82  opacity: 80%;
83}
84
85.canvas {
86  perspective: 800px;
87  inset: 0;
88  z-index: 200;
89  position: absolute;
90  display: grid;
91  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
92  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
93  gap: 0px 0px;
94  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
95    "tr-6 tr-7 tr-8 tr-9 tr-10"
96    "tr-11 tr-12 tr-13 tr-14 tr-15"
97    "tr-16 tr-17 tr-18 tr-19 tr-20"
98    "tr-21 tr-22 tr-23 tr-24 tr-25";
99}
100
101#card::before {
102  content: '';
103  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
104  filter: blur(2rem);
105  opacity: 30%;
106  width: 100%;
107  height: 100%;
108  position: absolute;
109  z-index: -1;
110  transition: 200ms;
111}
112
113.tr-1 {
114  grid-area: tr-1;
115}
116
117.tr-2 {
118  grid-area: tr-2;
119}
120
121.tr-3 {
122  grid-area: tr-3;
123}
124
125.tr-4 {
126  grid-area: tr-4;
127}
128
129.tr-5 {
130  grid-area: tr-5;
131}
132
133.tr-6 {
134  grid-area: tr-6;
135}
136
137.tr-7 {
138  grid-area: tr-7;
139}
140
141.tr-8 {
142  grid-area: tr-8;
143}
144
145.tr-9 {
146  grid-area: tr-9;
147}
148
149.tr-10 {
150  grid-area: tr-10;
151}
152
153.tr-11 {
154  grid-area: tr-11;
155}
156
157.tr-12 {
158  grid-area: tr-12;
159}
160
161.tr-13 {
162  grid-area: tr-13;
163}
164
165.tr-14 {
166  grid-area: tr-14;
167}
168
169.tr-15 {
170  grid-area: tr-15;
171}
172
173.tr-16 {
174  grid-area: tr-16;
175}
176
177.tr-17 {
178  grid-area: tr-17;
179}
180
181.tr-18 {
182  grid-area: tr-18;
183}
184
185.tr-19 {
186  grid-area: tr-19;
187}
188
189.tr-20 {
190  grid-area: tr-20;
191}
192
193.tr-21 {
194  grid-area: tr-21;
195}
196
197.tr-22 {
198  grid-area: tr-22;
199}
200
201.tr-23 {
202  grid-area: tr-23;
203}
204
205.tr-24 {
206  grid-area: tr-24;
207}
208
209.tr-25 {
210  grid-area: tr-25;
211}
212
213.tr-1:hover ~ #card {
214  transition: 125ms ease-in-out;
215  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
216}
217
218.tr-2:hover ~ #card {
219  transition: 125ms ease-in-out;
220  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
221}
222
223.tr-3:hover ~ #card {
224  transition: 125ms ease-in-out;
225  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
226}
227
228.tr-4:hover ~ #card {
229  transition: 125ms ease-in-out;
230  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
231}
232
233.tr-5:hover ~ #card {
234  transition: 125ms ease-in-out;
235  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
236}
237
238.tr-6:hover ~ #card {
239  transition: 125ms ease-in-out;
240  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
241}
242
243.tr-7:hover ~ #card {
244  transition: 125ms ease-in-out;
245  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
246}
247
248.tr-8:hover ~ #card {
249  transition: 125ms ease-in-out;
250  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
251}
252
253.tr-9:hover ~ #card {
254  transition: 125ms ease-in-out;
255  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
256}
257
258.tr-10:hover ~ #card {
259  transition: 125ms ease-in-out;
260  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
261}
262
263.tr-11:hover ~ #card {
264  transition: 125ms ease-in-out;
265  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
266}
267
268.tr-12:hover ~ #card {
269  transition: 125ms ease-in-out;
270  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
271}
272
273.tr-13:hover ~ #card {
274  transition: 125ms ease-in-out;
275  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
276}
277
278.tr-14:hover ~ #card {
279  transition: 125ms ease-in-out;
280  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
281}
282
283.tr-15:hover ~ #card {
284  transition: 125ms ease-in-out;
285  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
286}
287
288.tr-16:hover ~ #card {
289  transition: 125ms ease-in-out;
290  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
291}
292
293.tr-17:hover ~ #card {
294  transition: 125ms ease-in-out;
295  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
296}
297
298.tr-18:hover ~ #card {
299  transition: 125ms ease-in-out;
300  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
301}
302
303.tr-19:hover ~ #card {
304  transition: 125ms ease-in-out;
305  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
306}
307
308.tr-20:hover ~ #card {
309  transition: 125ms ease-in-out;
310  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
311}
312
313.tr-21:hover ~ #card {
314  transition: 125ms ease-in-out;
315  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
316}
317
318.tr-22:hover ~ #card {
319  transition: 125ms ease-in-out;
320  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
321}
322
323.tr-23:hover ~ #card {
324  transition: 125ms ease-in-out;
325  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
326}
327
328.tr-24:hover ~ #card {
329  transition: 125ms ease-in-out;
330  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
331}
332
333.tr-25:hover ~ #card {
334  transition: 125ms ease-in-out;
335  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
336}
337
338.noselect {
339  -webkit-touch-callout: none;
340   /* iOS Safari */
341  -webkit-user-select: none;
342   /* Safari */
343   /* Konqueror HTML */
344  -moz-user-select: none;
345   /* Old versions of Firefox */
346  -ms-user-select: none;
347   /* Internet Explorer/Edge */
348  user-select: none;
349   /* Non-prefixed version, currently
350									supported by Chrome, Edge, Opera and Firefox */
351}

/*works janky on mobile :<*/
.container {
  position: relative;
  width: 190px;
  height: 254px;
  transition: 200ms;
}

.container:active {
  width: 180px;
  height: 245px;
}

#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.subtitle {
  transform: translateY(160px);
  color: rgb(134, 110, 221);
  text-align: center;
  width: 100%;
}

.title {
  opacity: 0;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
}

.tracker:hover ~ #card .title {
  opacity: 1;
}

#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.tracker:hover {
  cursor: pointer;
}

.tracker:hover ~ #card #prompt {
  opacity: 0;
}

.tracker:hover ~ #card {
  transition: 300ms;
  filter: brightness(1.1);
}

.container:hover #card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

#card::before {
  content: '';
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.tr-1 {
  grid-area: tr-1;
}

.tr-2 {
  grid-area: tr-2;
}

.tr-3 {
  grid-area: tr-3;
}

.tr-4 {
  grid-area: tr-4;
}

.tr-5 {
  grid-area: tr-5;
}

.tr-6 {
  grid-area: tr-6;
}

.tr-7 {
  grid-area: tr-7;
}

.tr-8 {
  grid-area: tr-8;
}

.tr-9 {
  grid-area: tr-9;
}

.tr-10 {
  grid-area: tr-10;
}

.tr-11 {
  grid-area: tr-11;
}

.tr-12 {
  grid-area: tr-12;
}

.tr-13 {
  grid-area: tr-13;
}

.tr-14 {
  grid-area: tr-14;
}

.tr-15 {
  grid-area: tr-15;
}

.tr-16 {
  grid-area: tr-16;
}

.tr-17 {
  grid-area: tr-17;
}

.tr-18 {
  grid-area: tr-18;
}

.tr-19 {
  grid-area: tr-19;
}

.tr-20 {
  grid-area: tr-20;
}

.tr-21 {
  grid-area: tr-21;
}

.tr-22 {
  grid-area: tr-22;
}

.tr-23 {
  grid-area: tr-23;
}

.tr-24 {
  grid-area: tr-24;
}

.tr-25 {
  grid-area: tr-25;
}

.tr-1:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

HTML

1<div class="container noselect">
2  <div class="canvas">
3    <div class="tracker tr-1"></div>
4    <div class="tracker tr-2"></div>
5    <div class="tracker tr-3"></div>
6    <div class="tracker tr-4"></div>
7    <div class="tracker tr-5"></div>
8    <div class="tracker tr-6"></div>
9    <div class="tracker tr-7"></div>
10    <div class="tracker tr-8"></div>
11    <div class="tracker tr-9"></div>
12    <div class="tracker tr-10"></div>
13    <div class="tracker tr-11"></div>
14    <div class="tracker tr-12"></div>
15    <div class="tracker tr-13"></div>
16    <div class="tracker tr-14"></div>
17    <div class="tracker tr-15"></div>
18    <div class="tracker tr-16"></div>
19    <div class="tracker tr-17"></div>
20    <div class="tracker tr-18"></div>
21    <div class="tracker tr-19"></div>
22    <div class="tracker tr-20"></div>
23    <div class="tracker tr-21"></div>
24    <div class="tracker tr-22"></div>
25    <div class="tracker tr-23"></div>
26    <div class="tracker tr-24"></div>
27    <div class="tracker tr-25"></div>
28    <div id="card">
29    <p id="prompt">HOVER OVER :D</p>
30      <div class="title">look mom,<br>no JS</div>
31      <div class="subtitle">
32        mouse hover tracker
33      </div>
34      
35    </div>
36  </div>
37</div>

<div class="container noselect">
  <div class="canvas">
    <div class="tracker tr-1"></div>
    <div class="tracker tr-2"></div>
    <div class="tracker tr-3"></div>
    <div class="tracker tr-4"></div>
    <div class="tracker tr-5"></div>
    <div class="tracker tr-6"></div>
    <div class="tracker tr-7"></div>
    <div class="tracker tr-8"></div>
    <div class="tracker tr-9"></div>
    <div class="tracker tr-10"></div>
    <div class="tracker tr-11"></div>
    <div class="tracker tr-12"></div>
    <div class="tracker tr-13"></div>
    <div class="tracker tr-14"></div>
    <div class="tracker tr-15"></div>
    <div class="tracker tr-16"></div>
    <div class="tracker tr-17"></div>
    <div class="tracker tr-18"></div>
    <div class="tracker tr-19"></div>
    <div class="tracker tr-20"></div>
    <div class="tracker tr-21"></div>
    <div class="tracker tr-22"></div>
    <div class="tracker tr-23"></div>
    <div class="tracker tr-24"></div>
    <div class="tracker tr-25"></div>
    <div id="card">
    <p id="prompt">HOVER OVER :D</p>
      <div class="title">look mom,<br>no JS</div>
      <div class="subtitle">
        mouse hover tracker
      </div>
      
    </div>
  </div>
</div>