<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">hover, please</div>
<div class="flip-card-back">hello</div>
</div>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.flip-card {
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
text-align: center;
transition: 500ms;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
color: #FFF;
font-size: 30px;
border-radius: 4px;
}
.flip-card-front {
background: linear-gradient(to right, skyblue, blue);
}
.flip-card-back {
background: linear-gradient(to left, skyblue, blue);
transform: rotateY(180deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.