Card rotante

by alessia_fachin

HTML

<div>
    <img src="http://37.media.tumblr.com/tumblr_m9o46yAyqa1qa2dw5o1_500.jpg">
    <img
 src="http://31.media.tumblr.com/tumblr_ln31v9p4Px1qa2dw5o1_500.jpg">
        </div>

CSS

body{
    -webkit-perspective: 500px;
    /*-webkit-perspective-origin: 0 0;*/
    -webkit-transform-style: preserve-3d;
}
img{
    position: absolute;
    width: 100%;
    -webkit-backface-visibility: hidden;
}
img:nth-child(2){
    -webkit-transform: rotateY(180deg);
}
div{
    position: relative;
    width: 150px;
    transition: all 0.5s;
    -webkit-transform-style: preserve-3d;
    /*-webkit-transform-origin: 0 0;*/
}
div:hover{
    -webkit-transform: rotateY(180deg);
}