.flip-card { perspective: 40rem; transition: z-index, transform 0.2s; transition-delay: 0.7s, 0s; z-index: 0; padding: 10px; text-decoration: none; } .flip-card-inner { display: flex; transform-style: preserve-3d; transition: transform 0.5s; transform-origin: center right; border-radius: 0.25rem; flex: 1; width: 250px; height: 250px; margin: auto; text-align: center; box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04); } .flip-card:hover { transition-delay: 0s; z-index: 1; } .flip-card:active { transform: scale(0.975); } .flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner { transform: translateX(-250px) rotateY(-180deg); } .flip-card-front, .flip-card-back { backface-visibility: hidden; min-width: 100%; display: flex; align-items: center; background-color: white; box-sizing: border-box; border-radius: 0.25rem; } .flip-card-front { background-color: #818A91; color: black; } .flip-card-back { background-color: #bbb; color: black; transform: rotateY(-180deg) translateX(250px); }