Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}
/* 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-wrap: wrap;
gap: 10px;
justify-content: space-between;
width: 100%;
}
/* Sub-card */
.sub-card {
width: 48%;
height: 90%;
background-color: #f0f0f0;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
transform-style: preserve-3d;
cursor: pointer;
}
.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);
}
/* Sub-card flip effect */
.sub-card:hover .sub-card-inner {
transform: rotateY(180deg);
}
/* Main card flip effect */
.card.hovered .card-inner {
transform: rotateY(180deg);
}