Css3 flip

Animation css 3 sous chrome

by yinyann

HTML

<div> Visualiser sous Chrome </div>
<div class="container">
    <div class="flip">
        <div class="front">
            <span>intérieur</span>
        </div>
        <div class="back">
            <img src="http://ts2.mm.bing.net/th?id=H.4905133017006105&w=225&h=149&c=7&rs=1&pid=1.7" />
        </div>
    </div>
</div>
<div class="container"> 
        <div class="flip">
        <div class="front">
            <span>extérieur</span>
        </div>
        <div class="back">
            <img src="http://ts1.mm.bing.net/th?id=H.4709458605506588&w=226&h=148&c=7&rs=1&pid=1.7" />
        </div>
    </div>
</div>

CSS

.container{
    float: left;
    -webkit-perspective: 600;
    width: 224px;
    height: 148px;
    padding : 5px;
    color: grey;
}
.flip { 
    height: 100%;
    width: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.7s ease-in-out;
    position: relative;
}
.flip > div { 
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    position: absolute;
}

.flip:hover { -webkit-transform: rotateY(180deg); }

.front { border: grey 2px solid}
.back { -webkit-transform: rotateY(180deg); }