CSS3 Flip

Shows how to flip a div

by ryanwfiorini

HTML

<div id="container" class="flipIt">
   <p>Hello World!</p>
</div>

CSS

#container {
    position:relative;
    top:100px;
    left:100px;
    height:100px;
    width:200px;
    background-color:red;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(600px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(500px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(600px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}

@-moz-keyframes flip {
    0% {
        -moz-transform: perspective(600px) rotateY(0);
        -moz-animation-timing-function: ease-out;
    }
    40% {
        -moz-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -moz-animation-timing-function: ease-out;
    }
    50% {
        -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -moz-animation-timing-function: ease-in;
    }
    80% {
        -moz-transform: perspective(500px) rotateY(360deg) scale(.95);
        -moz-animation-timing-function: ease-in;
    }
    100% {
        -moz-transform: perspective(600px) scale(1);
        -moz-animation-timing-function: ease-in;
    }
}
@-ms-keyframes flip {
    0% {
        -ms-transform: perspective(600px) rotateY(0);
        -ms-animation-timing-function: ease-out;
    }
    40% {
        -ms-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -ms-animation-timing-function: ease-out;
    }
   ...