Create a Flip Card with CSS

Create Card Flip with CSS | Code Architects

Create a Flip card with Pure CSS. The animation is a perfect example of bringing real-world movements to the web. Flip card animation style concept is frequently used in modern Sign-up & Sign-In forms. Flip card animation is also used in JavaScript memory game & many other modern sites. The limitations of this style are mobile hover effects and browser support.

1. HTML Code
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Flip Card | @code.architects </title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<div class="card">
		<div class="card-front">
			Hover<br />me
		</div>
		<div class="card-back">
			<p class="title">Title</p>
			<p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eveniet totam doloremque
				iure ex inventore dolore voluptatibus quos quam quasi voluptatem odit, quae, reprehenderit doloribus
				veritatis expedita placeat molestias ad?</p>
		</div>
	</div>
</body>
</html>

Add the font links in the <head> tag. The fonts are provided from Google fonts.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
2. CSS Code

Resetting the HTML elements code with setting the margin & padding as 0. The box-sizing property allows us to include the padding and border in an element’s total width and height. box-sizing property of the main document is now updated to border-box. ✨

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: rgb(218, 252, 255);
	font-family: 'Archivo Black', sans-serif;
}

We will use the position property of CSS to align the content perfectly center to screen dimensions. The main code resides under a single parent element i.e. ‘card’. This element has 2 child elements. They are front-side as well as the back-side of the card. The parent element is changed to preserve-3d of transform-style and set the perspective property is equal to 600px. Both sides of the card have the width & height as 100% of the parent element to cover the parent element. The backface-property property defines whether or not the back face of an element should be visible when facing the user. In this code, the backface-property of each side of the card is hidden to make sure the other side of the card is visible to the screen.

.card {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 400px;
	width: 300px;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	perspective: 600px;
	transition: 0.5s;
}
.card-front {
	width: 100%;
	height: 100%;
	position: absolute;
	background: url("./img/card_cover.jpg");
	background-size: contain;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60px;
	color: #fff;
	text-align: center;
	font-weight: 600;
	box-shadow: 8px 8px 16px rgba(0,0,0,0.3);
	transform: rotateX(0deg);
	transition: 0.5s;
}
.card-back {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
	transform:rotateX(180deg);
	background: #fff;
	transition: 0.5s;
}

Change the axis of the card using the transform: rotateX() property when the parent element is in hover state. Add the rest of the styling to the elements to further enhancing the card style. You can perform the flip in 2 directions and they are horizontal direction & Vertical direction. To transform the animation direction to Y axis, convert the transform: rotateX() property to transform: rotateY().

.card:hover .card-front {
	transform: rotateX(-180deg);
}
.card:hover .card-back {
	transform: rotateX(0deg)
}
.title {
	margin-top: 30px;
	font-size: 24px;
	text-align: center;
}
.desc {
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

3. Output of flip card

Create a Flip Card with CSS
Create Flip card with CSS

The GitHub source code link: https://github.com/code-architects/flip-card and here is the live demo link: https://code-architects.github.io/flip-card/

Share this post, if you have liked it & thanks for scrolling. CSS animations are lot of fun. 😊

You can read our other blogs,

Show 4 Comments

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

8 − three =