Flip Card on Hover

In this tutorial, you will learn how flip a card on hover with pure CSS. Watch the video below for a detailed tutorial.

HTML

<body>
		<div class="card">
			<div class="front">
				<h2>Winterwind Inc.</h2>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et quibusdam earum a quasi aliquam architecto, maiores fugit ullam, numquam nesciunt sit est magnam harum animi modi, dolores alias non atque?</p>
			</div>
			<div class="back">
				<img src="logo.png" alt="">
			</div>
		</div>
	</body>

CSS

body {
	background-color: #2E3537;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: sans-serif;
}

.card {
	cursor: pointer;
}

.front, .back {
	width: 250px;
	height: 250px;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	backface-visibility: hidden;
	transition: transform 0.5s linear 0s;
}

.front {
	position: absolute;
	background-color: white;
	transform: perspective(600px) rotateY(180deg);
}

.back {
	background-color: #0E5D92;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card:hover .front {
	transform: perspective(600px) rotateY(0deg);
}

.card:hover .back {
	transform: perspective(600px) rotateY(-180deg);
}