Image rotation with CSS

by drublic

HTML

<div class="animate">  
    <input type="radio" id="ani-1" name="animation" checked="true">
    <input type="radio" id="ani-2" name="animation">

    <div id="card">
        <div class="front face">
        <label for="ani-2">
            <img src="http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg" width="220" height="220" alt="A photo of me.">
        </label>
        </div>
        <div class="back face">
        <label for="ani-1">
            <img src="http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images-2.jpg" width="220" height="220" alt="Another photo of me.">
        </label>
        </div>
   </div>
</div>

CSS

.animate {
    position: relative;
    width: 220px;
    height: 220px;
        -webkit-perspective: 1000;
    background-color: #ddd;
}
.face.back { display: none; }

.animate input[type="radio"] { display: none; }
#ani-1:checked + #card { -webkit-transform: rotateY(0deg); }
#ani-2:checked + #card { -webkit-transform: rotateY(180deg); }

#card {
    width: 100%;
    height: 100%;    
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all .3s ease-out;    
}
.face {
    position: absolute; top: 0; left: 0;
    -webkit-backface-visibility: hidden;
}
.face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
}