Css Flexbox Hover Flip Effect Pure CSS

Posted by Admin on 19 June 2018 in HTML/CSS

In this article, we are using CSS3  animation effect to make CSS flexbox hover flip effect. No javascript is used. It is purely based on CSS. We are using CSS3 transform translate effect.The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>cardboxboox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="cardbook">
		<div class="imgBox">
			<img src="bookpage.jpg" >
		</div>
		<div class="details">
			<h2>Eid  Mubarak</h2>
			<p>
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			</p>
			<div class="fromside">
             <span >From</span>
			<h3>Codex King</h3>
		    </div>

		</div>
	</div>
	
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Quicksand');

body{
 background: #708d00;
}

.cardbookdiv{
 margin: 0px;
 padding: 0px;
 background: #708d00;
}
.cardbook{
 font-family: 'Quicksand', sans-serif;
 position: absolute;
 top:50%;
 left: 50%;
 width: 300px;
 height: 400px;
 background: #fff;
 transform-style: preserve-3d;
 transform: translate(-50%,-50%) perspective(2000px);
 box-shadow: inset 300px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
 transition: 1s
}

.cardbook:hover{
 transform: translate(-50%,-50%) perspective(2000px) rotate(-10deg);
 box-shadow: inset 20px 0 50px rgba(0,0,0,.5),0 20px 10px rgba(0,0,0,.5);
}

.cardbook:before{
 content: '';
 position: absolute;
 top: -5px;
 left: 0px;
 height:5px;
 width:  100%;
 background: #475b02;
 transform-origin: bottom;
 transform: skewX(-45deg);

}

.cardbook:after{
 content: '';
 position: absolute;
 top: 0px;
 right: -5px;
 height:100%;
 width:  5px;
 background: #7EA301;
 transform-origin: left;
 transform: skewY(-45deg);
}

.cardbook .imgBox{
 width: 100%;
 height: 100%;
 position: relative;
 transform-origin: left;
 z-index: 1;
 transition: 1s cubic-bezier(.15,1.7,.84,.58); 

}

.cardbook:hover .imgBox{
 transform: rotateY(-135deg);
}

.cardbook .details{
 position: absolute;
 top:0;
 left:0;
 box-sizing: border-box;
 padding: 20px;
 z-index: -1;
}

.fromside{
 float: right;
}

.cardbook .details h2{
 text-align: center;
}

.cardbook .fromside h3{
  margin:0px;
  padding:0px;
}




To share this article on social media