.flash-card { background-color: transparent; width: 100%; height: 200px; perspective: 1000px; } .flash-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.5s; transform-style: preserve-3d; } .flash-card:hover .flash-card-inner { transform: rotateY(180deg); } .flash-card-front, .flash-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flash-card-front { border-radius: $box-radius; line-height: 150px; } .flash-card-back { border-radius: $box-radius; transform: rotateY(180deg); }