.flip-container { perspective: 1000px; } .flip-inner { position: relative; height: 300px; transform-style: preserve-3d; transition: transform 0.6s ease; } .flip-container:hover .flip-inner { transform: rotateY(180deg); } .flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .flip-back { transform: rotateY(180deg); background: #fff8e9; color: #000; display: flex; align-items: center; justify-content: center; border-radius: 12px; padding: 1rem; text-align: center; }