jQuery Flip plugin

by HYEONGJINKIM

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h2>Click</h2>

<hr />
<div class="col-sm-2">
    <div class="flip flip-click bg-primary">
        <div class="flip-front">card1</div>
        <div class="flip-back">card1-back</div>
    </div>
</div>
<div class="col-sm-2">
    <div class="flip flip-click bg-success">
        <div class="flip-front">card2</div>
        <div class="flip-back">card2-back</div>
    </div>
</div>
<div class="col-sm-2">
    <div class="flip flip-click bg-info">
        <div class="flip-front">card3</div>
        <div class="flip-back">card3-back</div>
    </div>
</div>
<div class="col-sm-2">
    <div class="flip flip-click bg-warning">
        <div class="flip-front">card4</div>
        <div class="flip-back">card4-back</div>
    </div>
</div>
<div class="col-sm-2">
    <div class="flip flip-click bg-danger">
        <div class="flip-front">card5</div>
        <div class="flip-back">card5-back</div>
    </div>
</div>
<div class="col-sm-2">
    <div class="flip flip-click bg-primary">
        <div class="flip-front">card6</div>
        <div class="flip-back">card6-back</div>
    </div>
</div>
<div class="clearfix"></div>

CSS

.flip {
    border-radius: 3px;
    min-height: 100px;
    padding: 10px;
}

JavaScript

(function ($) {
    $.fn.flip = function (options) {

        var interval = (options && options.interval) || 200;
        var settings = $.extend({
            "interval": interval,
                "transition": function (interval) {
                return "all " + ((interval) ? (interval / 1000) : 0) + "s ease-in-out";
            },
                "transform": function (back) {
                return ( !! back) ? "scaleX(-1)" : "scaleX(1)";
            },
                "front": ".flip-front",
                "back": ".flip-back",
                "event": (options && options.event) || ["click"] // ["click"], ["mouseover", "mouseout"]
        }, options);

        options = $.extend(settings, options);

        //scaleX(1.1);
        var setTransition = function (obj, interval) {
            return obj.css({
                "-webkit-transition": options.transition(interval)
            }, {
                "-moz-transition": options.transition(interval)
            }, {
                "-o-transition": options.transition(interval)
            }, {
                "transition": options.transition(interval)
            });
        };

        var eventHandler = function () {
            var condition = $(this).data("flip");

            setTransition($(this), interval).css({
                "-webkit-transform": options.transform(true)
            }, {
                "-moz-transform": options.transform(true)
            }, {
                "-o-transform": options.transform(true)
            }, {
                "transform": options.transform(true)
            }

            ).data("flip", !! !condition);

            (function (obj, condition) {
                var front = obj.find(options.front).hide();
                var back = obj.find(options.back).hide();

                setTimeout(function () {

                    setTransition(obj, 0).css({
                        "-webkit-transform": options.transform()
                    }, {
                     ...