More actions
No edit summary |
No edit summary |
||
Line 53: | Line 53: | ||
.sub-card-container { | .sub-card-container { | ||
display: flex; | display: flex; | ||
flex- | flex-direction: column; | ||
gap: 10px; | gap: 10px; | ||
justify-content: | justify-content: flex-start; | ||
width: 100%; | width: 100%; | ||
padding: 10px; | |||
box-sizing: border-box; | |||
} | } | ||
/* Sub-card */ | /* Sub-card */ | ||
.sub-card { | .sub-card { | ||
width: | width: 100%; | ||
height: | height: 80px; | ||
background-color: #f0f0f0; | background-color: #f0f0f0; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
Line 70: | Line 72: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
position: relative; | position: relative; | ||
cursor: pointer; | cursor: pointer; | ||
transition: all 0.3s ease-in-out; | transition: all 0.3s ease-in-out; | ||
Line 77: | Line 78: | ||
/* Expanded sub-card */ | /* Expanded sub-card */ | ||
.sub-card[data-expanded="true"] { | .sub-card[data-expanded="true"] { | ||
height: 300px; /* Expanding the sub-card */ | |||
height: | |||
} | } | ||
Line 107: | Line 107: | ||
} | } | ||
/* | /* Default state for sub-card back (hidden) */ | ||
.sub-card: | .sub-card-back { | ||
display: none; | |||
} | |||
/* When sub-card is expanded, show the back */ | |||
.sub-card[data-expanded="true"] .sub-card-back { | |||
display: flex; | |||
} | } | ||
Revision as of 19:41, 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: all 0.3s ease-in-out;
}
/* Expanded sub-card */
.sub-card[data-expanded="true"] {
height: 300px; /* Expanding the sub-card */
}
/* 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 expanded, show the back */
.sub-card[data-expanded="true"] .sub-card-back {
display: flex;
}
/* Main card flip effect */
.card.hovered .card-inner {
transform: rotateY(180deg);
}