Реализация двухстороннего флипа картинки

Представляю реализацию двухстороннего флипа картинки на css3. Данный трюк был реализован на работе в процессе работы над новым функционалом. И чтобы наработки не потерялись, я оставлю их здесь.


Работающее демо так же доступно по ссылке.

Весь механизм выполняется с помощью css3. Две картинки вращаются вокруг одной оси с одинаковой скоростью, но с фазовым сдвигом периода вращения 180 градусов (От -180 до 0 градусов и от 0 до 180 градусов). Кого физика сбила столку могут ознакомится с исходниками.

HTML:

<div class="rotor">
    <div id='curr' class="rotor-flip" style="background-image: url(/img/image.jpg);"></div>
    <div id='next' class="rotor-flip next" styLe="background-image: url(/img/next.jpg);"></div>
</div>
<button onclick="rotor()" class="m12">Flip</button>

CSS:

.rotor{
    width:180px;
    height:180px;
    position: relative;
    -webkit-perspective:1400px;
    -moz-perspective:1400px;
    -o-perspective:1400px;
    perspective:1400px;
}
.rotor>.rotor-flip{
    position: absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    -webkit-transition:-webkit-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-backface-visibility:hidden;
    -moz-transition:-moz-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-backface-visibility:hidden;
    -o-transition:-o-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    backface-visibility:hidden;
    transition:transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.next{
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}
.flipped {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    webkit-transform:rotateY(180deg);
}

JS:

function rotor(){
    var     curr = document.getElementById('curr'),
            next = document.getElementById('next');

    if(curr.className == "rotor-flip"){
        curr.className = 'rotor-flip flipped';
        next.className = 'rotor-flip';
    }else{
        curr.className = 'rotor-flip';
        next.className = 'rotor-flip next';
    }           
}