Edit in JSFiddle

function getGap($elem) {
    var gap = 0;

    if (typeof $elem.prev().get(0) !== 'undefined') {
        gap = Math.floor($elem.position().left - $elem.prev().get(0).getBoundingClientRect().right);
    }

    return gap;
}

function adjGap($elem, offset) {
    var gap = getGap($elem.last()) + offset, //cleanest solution, gap is not always accurate?
        leftPos = '-' + gap + 'px';

    $elem.not(':first').each(function () {
        $(this).css({
            'margin-left': leftPos
        });
    });
}

function sliceImage($elem, slices) {
    var sliceWidth = $elem.attr('width') / slices,
        sliceHeight = $elem.attr('height'),
        imageSrc = 'url("' + $elem.attr('src') + '")',
        $newElem = $('<div />').attr('data-sliced-image', $elem.attr('id') || '');

    for (var i = 0; i <= slices - 1; i++) {
        var pos = (i * -sliceWidth).toString() + 'px 0px';
        $newElem.append($('<span />').css({
            'display': 'inline-block',
            'width': sliceWidth + 'px',
            'height': sliceHeight + 'px',
            'background-position': pos,
            'background-image': imageSrc
        }));
    }
    $elem.replaceWith($newElem);

    return $newElem;
}

function foldImage($elem, offset) {
    var offset = offset || 0,
        adjGapTimer = setInterval(function () {
            adjGap($elem.children(), 0 + offset);
        }, 1);

    $elem.one('webkitAnimationStart msAnimationStart oanimationstart animationstart', function () {
        $(this).removeClass(function (i, css) {
            return (css.match(/.*folded/g) || []).join(' ');
        });
    }).one('webkitAnimationEnd msAnimationEnd oanimationend animationend', function () {
        $(this).toggleClass(function () {
            if ($(this).is('.fold-it')) {
                return 'folded';
            } else {
                return 'unfolded';
            }
        });
        $(this).removeClass(function (i, css) {
            return (css.match(/.*fold-it/g) || []).join(' ');
        });
        clearInterval(adjGapTimer);
        if ('ontouchstart' in document.documentElement || 'onmsgesturetap' in document.documentElement) {
            adjGap($(this).children(), 1 + offset);
        } else {
            adjGap($(this).children(), 0 + offset);
        }
    });
}

$(document).ready(function () {
    var $elem = $('#fan-fold'),
        $newElem = sliceImage($elem, 4);

    $('#fold').on('click', function () {
        foldImage($newElem);
        $newElem.addClass('fold-it');
    });
    $('#unfold').on('click', function () {
        foldImage($newElem);
        $newElem.addClass('unfold-it');
    });
});
<img id="fan-fold" src="http://www.dbpas.com/image/cartoon_sunset.png" alt="Cartoon Sunset" width="388" height="300" />
<br />
<button id="fold">Fold</button>
<button id="unfold">Unfold</button>
@-webkit-keyframes rotate-293-to-360 {
    0% {
        -webkit-transform: rotateY(293deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
    }
}
@-webkit-keyframes rotate-113-to-0 {
    0% {
        -webkit-transform: rotateY(113deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
    }
}
@-moz-keyframes rotate-293-to-360 {
    0% {
        -moz-transform: rotateY(293deg);
    }
    100% {
        -moz-transform: rotateY(360deg);
    }
}
@-moz-keyframes rotate-113-to-0 {
    0% {
        -moz-transform: rotateY(113deg);
    }
    100% {
        -moz-transform: rotateY(0deg);
    }
}
@-o-keyframes rotate-293-to-360 {
    0% {
        -o-transform: rotateY(293deg);
    }
    100% {
        -o-transform: rotateY(360deg);
    }
}
@-o-keyframes rotate-113-to-0 {
    0% {
        -o-transform: rotateY(113deg);
    }
    100% {
        -o-transform: rotateY(0deg);
    }
}
@keyframes rotate-293-to-360 {
    0% {
        transform: rotateY(293deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
@keyframes rotate-113-to-0 {
    0% {
        transform: rotateY(113deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}
/*****/
 @-webkit-keyframes rotate-360-to-293 {
    0% {
        -webkit-transform: rotateY(360deg);
    }
    100% {
        -webkit-transform: rotateY(293deg);
    }
}
@-webkit-keyframes rotate-0-to-113 {
    0% {
        -webkit-transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(113deg);
    }
}
@-moz-keyframes rotate-360-to-293 {
    0% {
        -moz-transform: rotateY(360deg);
    }
    100% {
        -moz-transform: rotateY(293deg);
    }
}
@-moz-keyframes rotate-0-to-113 {
    0% {
        -moz-transform: rotateY(0deg);
    }
    100% {
        -moz-transform: rotateY(113deg);
    }
}
@-o-keyframes rotate-360-to-293 {
    0% {
        -o-transform: rotateY(360deg);
    }
    100% {
        -o-transform: rotateY(293deg);
    }
}
@-o-keyframes rotate-0-to-113 {
    0% {
        -o-transform: rotateY(0deg);
    }
    100% {
        -o-transform: rotateY(113deg);
    }
}
@keyframes rotate-360-to-293 {
    0% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(293deg);
    }
}
@keyframes rotate-0-to-113 {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(113deg);
    }
}
[data-sliced-image] {
    width: 500px;
    height: 300px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
}
[data-sliced-image] span {
    display: inline-block;
    margin: 0;
    padding: 0;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
[data-sliced-image].folded span:nth-child(odd) {
    -webkit-transform: rotateY(293deg);
    -moz-transform: rotateY(293deg);
    -o-transform: rotateY(293deg);
    transform: rotateY(293deg);
}
[data-sliced-image].fold-it span:nth-child(odd) {
    -webkit-animation-name: rotate-360-to-293;
    -moz-animation-name: rotate-360-to-293;
    -o-animation-name: rotate-360-to-293;
    animation-name: rotate-360-to-293;
}
[data-sliced-image].unfold-it span:nth-child(odd) {
    -webkit-animation-name: rotate-293-to-360;
    -moz-animation-name: rotate-293-to-360;
    -o-animation-name: rotate-293-to-360;
    animation-name: rotate-293-to-360;
}
[data-sliced-image].unfolded span:nth-child(odd) {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
/*****/
[data-sliced-image].folded span:nth-child(even) {
    -webkit-transform: rotateY(113deg);
    -moz-transform: rotateY(113deg);
    -o-transform: rotateY(113deg);
    transform: rotateY(113deg);
}
[data-sliced-image].fold-it span:nth-child(even) {
    -webkit-animation-name: rotate-0-to-113;
    -moz-animation-name: rotate-0-to-113;
    -o-animation-name: rotate-0-to-113;
    animation-name: rotate-0-to-113;
}
[data-sliced-image].unfold-it span:nth-child(even) {
    -webkit-animation-name: rotate-113-to-0;
    -moz-animation-name: rotate-113-to-0;
    -o-animation-name: rotate-113-to-0;
    animation-name: rotate-113-to-0;
}
[data-sliced-image].unfolded span:nth-child(even) {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}