Flip Panel

A simple flip card effect panel

HTML

<div class="block panel">
    <div class="front">	<a class="action">Configure Block</a>

        	<h2 id="list-title">Top Sellers</h2>

        <ol id="list-items">
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
        </ol>
    </div>
    <div class="back">
        <div class="pad">
            <form action="###" method="post">
                	<h3>Edit List</h3>

                <p>
                    <input type="text" name="form_title" id="form_title" value="Top Sellers" />
                </p>
                <p>Display
                    <select name="form_items" id="form_items">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3" selected="selected">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>items</p>
                <input type="submit" class="edit-submit" value="Save Changes" />
            </form>
        </div>
    </div>
</div>

CSS

.panel {
    float: left;
    width: 200px;
    height: 200px;
    margin: 20px;
    position: relative;
    font-size: .8em;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */

/* -- general styles, including Y axis rotation -- */
 .panel .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    border: 1px solid #ccc;
    background: #6b7077;
    text-align: center;
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    -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;
}
.panel.flip .front {
    z-index: 900;
    border-color: #eee;
    background: #333;
    -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 50px rgba(0, 0, 0, 0.2);
}
.panel .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: inherit;
    height: inherit;
    border: 1px solid #ccc;
    background: #333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
   ...

JavaScript

$(function () {
    // set up block configuration
    $('.block .action').click(function () {
        $('.block').addClass('flip');
    });
    $('.block .edit-submit').click(function (e) {
        $('.block').removeClass('flip');

        // why not update that list for fun?
        $('#list-title').text($('#form_title').val());
        $('#list-items').empty();
        for (var num = 1; num <= $('#form_items').val(); num++) {
            $('#list-items').append('<li>Name ' + num + '</li>');
        }
        e.preventDefault();
    });
});