<!-- note that the answers must fit on the back of the card or they will overflow -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Question 1</h2>
<p>This is a question about something or other</p>
<p class="flipme">(Hover card to see answer)</p>
</div>
<div class="flip-card-back">
<h2>Answer 1</h2>
<p>The answer is that I don't know what the question means</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Question 2</h2>
<p>This is a longer question about something or other that you need to answer.</p>
<p class="flipme">(Hover card to see answer)</p>
</div>
<div class="flip-card-back">
<h2>Answer 2</h2>
<p>The answer is once again that I don't know the answer and I still don't know what the question means</p>
</div>
</div>
</div>
.flip-card h2 {
margin: 0 0 1rem;
}
.flip-card {
width: 300px;
perspective: 1000px;
margin: 1rem;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.flip-card-front {
background-color: teal;
color: white;
position: static;
}
.flip-card-back {
background-color: black;
color: white;
transform: rotateY(180deg);
}
/*
Forum question answer only :
https://www.sitepoint.com/community/t/transactions-and-animations/377584/5
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.