<div class="flip-card" tabIndex="0">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3>Hover, please!</h3>
</div>
<div class="flip-card-back">
<h3>Whoaaa!!!</h3>
</div>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.flip-card:focus {
outline: 0;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner{
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
}
.flip-card-front {
background: linear-gradient(to left, #4364f7, #6fb1fc);
color: black;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.flip-card-back {
background: linear-gradient(to right, #4364f7, #6fb1fc);
color: white;
transform: rotateY(180deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
font-size: 20px;
font-family: Verdana, sans-serif;
font-weight: bold;
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.