CSS Flip Card Effect & Design

CSS Flip Card Effect & Design

Learn how to create a flip card with CSS.
Create a div container.
Put in it another container with perspective defined.
When hovering on the outside container, add a rotate around the Y axis to the inside container.

HTML Code


<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" href="main.css">
	<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
	</head>
	
	<body>
	   <div class="flip-card">
	   	<div class="flip-card-inner">
	   		<div class="front">Front</div>
	   		<div class="back">Back</div>
	   	</div>
	   </div>
	</body>
</html>

CSS Code

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flip-card {
    width: 270px;
    height: 320px;
    perspective: 1000px;
    cursor: pointer;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 10px 50px grey;
}
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font: 45px 'Special Elite', cursive;
    backface-visibility: hidden;
}
.back {
    background: #e68fde;
    transform: rotateY(180deg);
}
.flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
}
.front {
    background: #ba8fe6;
}
Comments are closed.