JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="folding_img_wrap">
        <img class="folding_img" src='http://imperiomf.files.wordpress.com/2011/12/naruto-kakashi-sakura-sasuke.jpg' />
    </div>
</div>

<button class="toggle">Toggle Me!</button>

CSS

/**********
 * resets *
 **********/
img {
    vertical-align: bottom;
}

/**********
 *  main  *
 **********/

/*animations*/

@-webkit-keyframes half-flip {
    0% {
        -webkit-transform: rotateX(0deg);
    }

    100% {
        -webkit-transform: rotateX(90deg);
    }
}

@-webkit-keyframes half-flip02 {
    0% {
        -webkit-transform: rotateX(90deg);
    }

    100% {
        -webkit-transform: rotateX(0deg);
    }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
    animation-fill-mode: forwards;
}

.half-flip-in {
    -webkit-animation: half-flip02 1s;
    animation-fill-mode: forwards;
}

/*styles*/

.folding_img_wrap {
    overflow: hidden;
}

.folding_img {
    height: 300px;
}

JavaScript

var folding_img_wrap = $('.folding_img_wrap'),
    toggle_count = 0;

$(".toggle").toggle(function(){
    folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
},function(){
 folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});