Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Flipping Effect using CSS3

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 132
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: