Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • 3D Flip Rotate animation CSS3

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 246
    Comment on it

    For making a flip roatation we use CSS3 3D property. Child elements will preserve its 3D position that is specified by Preserve-3d. The nested elements are rendered in 3D space are specified by transform-style property.
    Here is the example:- 

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
        .container {
            width: 416px;
            height: 260px;
            position: relative;
            perspective: 800px;
        }
        .container:hover #card{
            transform: rotateY(180deg);
        }
        #card {
          width: 100%;
          height: 100%;
          position: absolute;
          transform-style: preserve-3d;
          transition: transform 1s;
        }
        #card figure {
            margin: 0;
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }
        #card figure img{
            max-width: 100%;
        }
        #card .front {
          background: red;
        }
        #card .back {
          background: blue;
          transform: rotateY( 180deg );
        }
        #card.flipped {
          transform: rotateY( 180deg );
        }
        </style>
    </head>
    <body>
        <section class="container">
            <div id="card">
                <figure class="front"><img src="http://www.9freepictures.com/d/file/travel-tours/200910/china-magnificent-scenery-119-2.jpg" alt=""></figure>
                <figure class="back"><img src="http://cdn.bigbangfish.com/beautiful/beautiful-scenery/beautiful-scenery-9.jpg" alt=""></figure>
            </div>
        </section>
    </body>
</html>


    Flip Rotate 3D flip rotate preserve-3d css3
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: