Image rotation with CSS

by drublic

HTML

<div class="about-img">
        <input type="radio" id="ani-1" name="animation">
        <label for="ani-1">
            <img src="http://drublic.de/blog/wp-content/uploads/2011/08/blog-hans-min.jpg" width="220" height="220" alt="A photo of me.">
        </label>

        <input type="radio" id="ani-2" name="animation" checked>
        <label for="ani-2">
            <img src="http://drublic.de/blog/wp-content/uploads/2011/08/blog-hans-2-min.jpg" width="220" height="220" alt="Another photo of me.">
        </label>
</div>

CSS

.about-img {
    position: relative; z-index: 1;
    width: 220px; height: 220px;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
}

.about-img img {
    position: absolute; left: 20px; top: 0; z-index: 2;
    visibility: visible;
 -webkit-transition: all 2s ease-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateY(0deg);
}
.about-img input[type="radio"] { }

input:checked + label img {
    visibility: hidden;
    -webkit-transform: rotateY(-180deg);
}