Image rotation with CSS

by drublic

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<div class="animate-wrap">  
    <input type="radio" id="ani-1" name="animation" checked>
    <input type="radio" id="ani-2" name="animation">
    
    <div class="animate">
        <label for="ani-2" class="front">
            <img src="http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg" width="220" height="220" alt="A photo of me.">
        </label>
        
        <label for="ani-1" class="back">
            <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>

CSS

/* Wrapper */
.animate-wrap {
    position: relative;
    width: 220px; height: 220px;
    background-color: #aaa;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
}

/* Inputs */
.animate-wrap input {
    display: none;
}
.animate-wrap [type="radio"]:checked + .animate {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* Image-Wrapper */
.animate {
    -webkit-transform: preserve-3d;
    -moz-transform: preserve-3d;
    transform: preserve-3d;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

/* Labels */
label {
    position: absolute; top: 0; left: 0; z-index: 2;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.front {
    z-index: 1;
}

JavaScript

if (!Modernizr.csstransforms3d) {
    $('label').click(function() {
        $('.animate .front').removeClass('front');
        $(this).addClass('front');
    });
}