More actions
No edit summary |
No edit summary |
||
Line 73: | Line 73: | ||
position: relative; | position: relative; | ||
cursor: pointer; | cursor: pointer; | ||
transition: | transition: transform 0.6s ease-in-out; | ||
} | } | ||
Line 112: | Line 107: | ||
} | } | ||
/* When sub-card is | /* When sub-card is flipped, show the back */ | ||
.sub-card[data-expanded="true"] .sub-card-back { | .sub-card[data-expanded="true"] .sub-card-back { | ||
display: flex; | display: flex; |
Revision as of 19:47, 22 December 2024
/* Container for the main cards */
.card-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin: 20px;
}
/* Main card */
.card {
width: 400px;
height: 200px;
position: relative;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transform-style: preserve-3d;
cursor: pointer;
transition: transform 0.6s ease-in-out;
}
/* Wrapper for the front and back sides */
.card-inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
}
/* Front side of the main card */
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
/* The back side of the main card */
.card-back {
transform: rotateY(180deg);
}
/* Sub-card container in the back */
.sub-card-container {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: flex-start;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
/* Sub-card */
.sub-card {
width: 100%;
height: 80px;
background-color: #f0f0f0;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
cursor: pointer;
transition: transform 0.6s ease-in-out;
}
/* Sub-card flip effect */
.sub-card-inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
}
/* Sub-card front and back */
.sub-card-front, .sub-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
.sub-card-back {
transform: rotateY(180deg);
}
/* Default state for sub-card back (hidden) */
.sub-card-back {
display: none;
}
/* When sub-card is flipped, show the back */
.sub-card[data-expanded="true"] .sub-card-back {
display: flex;
}
/* Main card flip effect */
.card.hovered .card-inner {
transform: rotateY(180deg);
}