create simple CSS3 animation

[vizz]

I want to create simple css3 effect like gallery effect here
How to create classess

• .animation{}
• .scaleDown{}
• .rotateFoldTop{}
• .rotateUnfoldBottom{}

when menus are clicked scale down main wrapper, after scale down is completed then only rotateFoldTop main page & same time rotateUnfoldBottom next page (activeTab). After rotateUnfoldBottom is completed remove scale down or ScaleUp main wrapper to normal

Classes are mixing up so scale down is not working properly

HTML

<div id="mainWrapper" class="animation">
    <div class="page mainpage"><strong>Main Page</strong></div>
    <div class="page page-1"><strong>Page 1</strong></div>
    <div class="page page-2"><strong>Page 2</strong></div>
    <div class="page page-3"><strong>Page 3</strong></div>
</div>

Script

$(".nav li").on("click", function(){

    var activeTab = $(this).find("a").attr("href");


return false;
 });

CSS

#mainWrapper, .page{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }

.animation{
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
    transition:all 0.8s ease;   
 }

.scaledown{
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);        
  }

.rotateFoldTop {
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);

  }

.rotateUnfoldBottom {
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
  }