dashpad widget flip effect

by niki4810

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css">
<div class="dashpadWidget clearfix">
    <div class="front">
        <div class="dashpadWidgetHeader clearfix">
            <div class="dashboardWidgetTitle pull-left"> <b>State Invoices By Date</b>

            </div>
            <div class="dashboardWidgetActions pull-right"> <i class="btn btn-primary icon-cog icon-white"></i>
 <i class="btn btn-primary icon-plus icon-white"></i>
 <i class="btn btn-primary icon-remove icon-white"></i>

            </div>
        </div>
        <div class="dashpadWidgetContent" style="">
            <div>
                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline" role="grid">
                    <table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-striped table-condensed dataTable" id="DataTables_Table_0">
                        <thead>
                            <tr role="row">
                                <th class="sorting_disabled" tabindex="0" rowspan="1" colspan="1">Claim #</th>
                                <th class="sorting_disabled" tabindex="0" rowspan="1" colspan="1">Line #</th>
                                <th class="sorting_disabled" tabindex="0" rowspan="1" colspan="1">Days Open</th>
                            </tr>
                        </thead>
                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                            <tr class="odd">
                                <td class="">0001-063</td>
                                <td class="">63</td>
                                <td class="">63</td>
                            </tr>
                            <tr class="even">
                                <td class="">0001-065</td>
                                <td class="">65</td>
      ...

CSS

.dashpadWidget {
    float: left;
    width: 400px;
    height: 260px;
    margin: 5px;
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    /*     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); */
}
.dashpadWidgetHeader {
    max-height: 50px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 5px;
}
.dashpadWidgetHeader .dashboardWidgetTitle {
    width: 75%;
}
.dashpadWidgetHeader .dashboardWidgetActions i {
    padding: 3px;
    margin: 0 2px 0 2px;
    border: 1px solid #CCC;
    display: inline-block;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}
.dashpadWidgetMaximized {
    z-index: 9999;
    width: 100%;
    height: 100%;
    margin: 0.3em;
    left: 0;
    top: 0;
    position: fixed;
}
/*flip related styles*/
 .dashpadWidget .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    padding: 5px;
    background : #fff;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.dashpadWidget.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -moz-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px...

JavaScript

$(function () {
    // set up block configuration
    $('.icon-cog').click(function () {
        $('.dashpadWidget').addClass('flip');
    });
    $('.btnFlipFront').click(function (e) {
        $('.dashpadWidget').removeClass('flip');
    });
    $(".icon-plus").click(function (e) {
        $(".dashpadWidget").toggleClass("dashpadWidgetMaximized");
    });
});