JSFiddle - React, Tailwind, and code Playground

by joplomacedo

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

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

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

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

.half-flip-in {
    -webkit-animation: half-flip-out 1s reverse;
}

img {
    vertical-align: bottom;
}

.folding_img_wrap {
    overflow: hidden;

}

.folding_img {
    height: 300px;
}

JavaScript

(function() {
    var folding_img = $('.folding_img'),
        folding_img_wrap = $('.folding_img_wrap'),
        clone = folding_img_wrap.clone(),
        folding_image_height = folding_img.height(),
        half_px_folding_image_height = folding_image_height / 2 + "px",
        toggle_count = 0;


    folding_img_wrap.css({
        'height': half_px_folding_image_height
    });

    clone.css({
        'height': half_px_folding_image_height
    }).children('.folding_img').css({
        'margin-top': "-" + half_px_folding_image_height
    }).appendTo('.box');



    $('.toggle').on('click', function() {
        if (toggle_count % 2 === 0) {
            folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
        } else {
            folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
        }
        toggle_count++;
    });
})();