Animated flip card using CSS 3D transforms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<title>Animated flip card with CSS 3D transforms</title> | |
<style> | |
body { | |
padding: 30px; | |
background-color: lightyellow; | |
font-family: sans-serif; | |
} | |
.flip { | |
width: 150px; | |
height: 150px; | |
text-align: center; | |
perspective: 600px; | |
float: left; | |
margin: 30px; | |
} | |
.flip-content { | |
width: 100%; | |
height: 100%; | |
transition: transform 0.4s; | |
transform-style: preserve-3d; | |
} | |
.flip:hover .flip-content { | |
transform: rotateY(180deg); | |
transition: transform 0.3s; | |
} | |
.flip-front, | |
.flip-back { | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
line-height: 150px; | |
backface-visibility: hidden; | |
background-color: lightseagreen; | |
color: #fff; | |
border: 6px solid lightcoral; | |
box-shadow: 6px 6px lightseagreen; | |
} | |
.flip-back { | |
transform: rotateY(180deg); | |
border: 6px solid lightseagreen; | |
box-shadow: 6px 6px lightcoral; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="flip"> | |
<div class="flip-content"> | |
<div class="flip-front"> | |
<img src="https://www.fillmurray.com/150/150" /> | |
</div> | |
<div class="flip-back"> | |
<strong>BILL MURRAY</strong> | |
</div> | |
</div> | |
</div> | |
<div class="flip"> | |
<div class="flip-content"> | |
<div class="flip-front"> | |
<img src="https://www.placecage.com/c/150/150" /> | |
</div> | |
<div class="flip-back"> | |
<strong>NIC CAGE</strong> | |
</div> | |
</div> | |
</div> | |
<div class="flip"> | |
<div class="flip-content"> | |
<div class="flip-front"> | |
<img src="https://www.stevensegallery.com/150/150" /> | |
</div> | |
<div class="flip-back"> | |
<strong>STEVEN SEAGAL</strong> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Source => https://w3collective.com/flip-card-css/