Crocodoc 3D Demo #2

page-transitions.css

/* ... */

.page-transitions .page-layer {
    /* cheating a bit and adding a transition to "all" properties */
    transition: all 0.3s;
}

.page-layer:first-child,
.page-exploded .page-layer {
    background: rgba(255,255,255,0.03);
    border-color: rgba(180,180,180,0.2);
    color: rgba(255,255,255,0.25);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.25);
}

/* ... */

page-transitions.js

function Page($el) {
    var exploded = false;
    
    /* ... */
    
    // we'll add the following methods to the Page object:
    self.enableTransitions = function () {
        $el.addClass('page-transitions');
    };
    
    self.disableTransitions = function () {
        $el.removeClass('page-transitions');
    };
    
    self.toggleExploded = function () {
        exploded = !exploded;
        if (exploded) $el.addClass('page-exploded');
        else $el.removeClass('page-exploded');
        updateLayers();
    };
    
    // and a small modification to applyTransform:
    applyTransform = function ($layer) {
        var z = exploded ? $layer.index() * LAYER_SPACING : 0;
        var matrix = rotationMatrix.translate(0, 0, z);
        $layer.css('transform', matrix.toString());
    };
    
    /* ... */
}


// we'll need to modify the event handling a bit, because we don't want the page to
// try to transition while we're dragging it around
$(document).on('mousedown', function (ev) {
    /* ... */
    
    // disable transitions when the mouse is down so it doesn't try to transition
    // while dragging the page around
    page.disableTransitions();
    
    /* ... */
    
    $(document).on('mouseup', function (ev) {
        /* ... */
        
        // enable transitions again!
        page.enableTransitions();
        
        /* ... */
    });
    
    /* ... */
});