Introduction to CSS3
CSS3 is the successor of CSS2 which comes with various new modules such as selectors, borders and background, 2D/3D Transformations, text-effects, box-model, Animation and Multiple column layouts etc.
Flipping effect using Transitions,Transforms & Animation on hover:-
Using the transition, transforms and animation property in CSS3 we can create flipping effect on hover. This can also be achieved without using javascript which is more easy to understand and learn.
Below is an example to show flipping effect on hover using CSS.
HTML Code:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Flipping Effect</title>
</head>
<body>
<div class="container">
<div class="section">
<h2 class="title">On Hover</h2>
</div>
<div class="section-content clearfix">
<div class="panel">
<div class="front card">
<span class="text">Front Side</span>
</div>
<div class="back card">
<span class="text">Back Side</span>
</div>
</div>
<div class="panel">
<div class="front card">
<span class="text">Front Side</span>
</div>
<div class="back card">
<span class="text">Back Side</span>
</div>
</div>
<div class="panel">
<div class="front card">
<span class="text">Front Side</span>
</div>
<div class="back card">
<span class="text">Back Side</span>
</div>
</div>
<div class="panel">
<div class="front card">
<span class="text">Front Side</span>
</div>
<div class="back card">
<span class="text">Back Side</span>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code:-
.panel{
width: 250px;
height: 200px;
margin: auto;
position: relative;
display: inline-block;
}
.section{
padding-bottom: 40px;
}
.title{
font-size: 35px;
font-weight: bold;
text-align: center;
}
.section-content{
padding-left: 20%;
}
.text{
bottom: 0;
color: #fff;
height: 20px;
left: 0;
line-height: 20px;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}
.front {
background-color: #ff5078;
}
.back {
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #1e1e1e;
}
.panel:hover .front {
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.panel:hover .back {
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
Conclusion:-
Thus, the flipping effect is achieved using CSS3 Transitions and Transformations properties. The code simply uses the Transitions and Transformations properties of CSS3.
Note:- This will work only on the modern browsers such as on Safari 3.2+,Chrome ,Firefox 4+, Opera 10.5+, and IE 10.
0 Comment(s)