CSS Card Flip: ROTATE FLIP CARD ON-HOVER
HTML
<!-- Top Navigation -->
<div class="cctop clearfix">
<a href="http://codeconvey.com/Tutorials/css-card-flip-animation/"><span>Checkout Demo</span></a>
<span class="right"><a href="http://codeconvey.com/css-flip-animation-on-hover-flipping-card/"><span>Read Article about CSS Flip Animation</span></a></span>
</div>
<header class="codeconveyHeader">
<h1>CSS Card Flip Animation</h1>
<h2>Rotate Flip Card on-hover</h2>
</header>
<section>
<div class="container text-center">
<div class="card-container">
<div class="card">
<div class="front">
<span class="fa fa-user"></span>
</div>
<div class="back">User</div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="front">
<span class="fa fa-cogs"></span>
</div>
<div class="back">Settings</div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="front">
<span class="fa fa-code"></span>
</div>
<div class="back">Code</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="content">
<p style="text-align:center;"><strong>The CSS Card Flip Animation provide you two face of a div. One for front face and second have back side. Both allow you to add content, image or link.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
</section>
CSS
.card-container {
display: inline-block;
margin: 0 auto;
padding: 0 12px;
perspective: 900px;
text-align: center;
}
.card {
position: relative;
width: 100px;
height: 100px;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
background: #FEC606;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 5px;
color: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
}
.front {
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.back {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);
}
/*demo purpose only*/
@import url(https://fonts.googleapis.com/css?family=Jaldi:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
body {
background: #61849f none repeat scroll 0 0;
color: #fff;
font-family: "Jaldi",sans-serif;
font-size: 100%;
line-height: 1.25;
margin: 0;
padding: 0;
}
a {
font-family: 'Jaldi', sans-serif;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #373e18;
}
.text-center{
text-align:center;
}
.codeconveyHeader {
padding: 2em 12px;
text-align: center;
}
.codeconveyHeader h1 {
color: #fff;
font-size: 2em;
font-weight: 700;
margin: 0;
}
.codeconveyHeader h2 {
display: block;
padding: 0;
font-size: 18px;
margin: 0;
text-transform: uppercase;
}
/* To Navigation Style */
.cctop {
background: #FEC606;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 0.75em;
line-height: 3.2;
}
.cctop a {
display: inline-block;
padding: 7px 12px;
text-decoration: none;
letter-spacing: 1px;
color: #fff;
}
.cctop span.right {
float: right;
}
.cctop span.right a {
display: block;
float: left;
}
section {
color:#fff;
text-align: center;
font-size: 1.5em;
padding-top:2em;
}
section button {
border: none;
padding: 15px 30px;
outline: none;
background: #85b91e;
}
.content {
font-family: "Lato","Avenir Next",Arial,sans-serif;
font-size: 25px;
font-weight: 300;
line-height: normal;
}
/* Related Items*/
.related > a {
border: 1px solid #99cc33;
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
color: #99cc33;
opacity: 0.8;
-webkit-transition: color 0.3s, border-color 0.3s;
transition: color 0.3s, border-color 0.3s;
-webkit-backface-visibility: hidden;
}
.related a:hover {
border-color: #82b222;
color: #82b222;
}
.related a img {
max-width: 100%;
}
.related a h3 {
margin: 0;
padding: 0.5em 0 0.3em;
max-width: 300px;
text-align: left;
font-size: 65%;
font-weight: 400;
}
.container {
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media only screen and (min-width:240px) and (max-width: 768px){
.codecon_half{ width:100%;}
.codeconTop {
text-align: center;
}
.codeconTop a{
display:block;
}
.codeconTop span.right {
float: none;
}
.codeconTop span.right a {
float: none;
}
}
