3d flip card on hover using CSS

3d flip card effect on hover using CSS and HTML

To achieve a 3d flip card we'll use rotateY to rotate the object in 180 deg plus backface-visibility to hide the back face of the rotated element and transition in order to define the time of the animation.

1HTML

<div class="flip-3d">
	<div class="front-side"><img src="imgs/3d-flip.jpg"></div>
	<div class="back-side"><p>You flipped me</p></div>
</div>

2CSS

body, html{
	padding: 0;
	margin: 0;
}
img{
	width: 100%;
	max-width: 100%;
	height: 100%;
}
.flip-3d{
	height: 300px;
    width: 300px;
    margin: 0 auto;
    position: relative;
}

.flip-3d .front-side{
    transition: 1s;
    z-index: 2;
    height: 100%;
    width: 100%;
}

.flip-3d .back-side{
	transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: 1s;
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: #ccc;
    font-size: 40px;
    text-align: center;
}

.flip-3d:hover .front-side{
	transform: rotateY(-180deg);
}

.flip-3d:hover .back-side{
	transform: rotateY(0deg);
}

3Demo -