1 
 2<div class="card__container">
 3  <div class="shadow__card"></div>
 4  <div class="card__content">
 5    <h3 class="card__title">User Profile</h3>
 6    <p class="card__text">This is a sample user card with 3D hover effects.</p>
 7    <button class="card__button">
 8      View Details
 9    </button>
10  </div>
11</div>          

 1 
 2.card__container {
 3  position: relative;
 4  background: #f0f0f0;
 5  padding: 25px;
 6  display: flex;
 7  flex-direction: column;
 8  justify-content: center;
 9  gap: 15px;
10  border: 4px solid #000;
11  max-width: 350px;
12  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
13  transform-style: preserve-3d;
14  transform: rotateX(10deg) rotateY(-10deg);
15  perspective: 1000px;
16  box-shadow: 10px 10px 0 #000;
17}
18 
19.card__container:hover {
20  transform: rotateX(5deg) rotateY(1deg) scale(1.05);
21  box-shadow: 25px 25px 0 -5px #e9b50b, 25px 25px 0 0 #000;
22}
23 
24.shadow__card {
25  content: "";
26  position: absolute;
27  width: 100%;
28  height: 100%;
29  left: 0;
30  bottom: 0;
31  z-index: -1;
32  transform: translateZ(-50px);
33  background: linear-gradient(
34    45deg,
35    rgba(107, 180, 255, 0.4) 0%,
36    rgba(107, 180, 255, 0.1) 100%
37  );
38  filter: blur(20px);
39}
40 
41.card__content {
42  transform: translateZ(10px);
43  position: relative;
44  z-index: 3;
45  font-family: "Roboto", Arial, sans-serif;
46  color: #000;
47}
48 
49.card__title {
50  margin: 0 0 10px;
51  font-size: 20px;
52  font-weight: bold;
53  text-transform: uppercase;
54  letter-spacing: -0.5px;
55}
56 
57.card__text {
58  margin: 0 0 20px;
59  font-size: 16px;
60  color: #666;
61}
62 
63.card__button {
64  cursor: pointer;
65  border: 3px solid #000;
66  background: #e9b50b;
67  color: #000;
68  font-weight: bold;
69  text-transform: uppercase;
70  padding: 10px 15px;
71  font-size: 14px;
72  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
73  transform: translateZ(20px);
74  position: relative;
75  z-index: 3;
76  font-family: "Roboto", Arial, sans-serif;
77  letter-spacing: -0.5px;
78}
79 
80.card__button:hover {
81  background: #e9b50b;
82  transform: translateZ(10px) translateX(-5px) translateY(-5px);
83  box-shadow: 5px 5px 0 0 #000;
84}