blubb

gistfile1.txt

            // html
            <div id="widget-menu">
              <div id="wizard-step-zero" class="front create-widget-widget add-widget widget beta" rel="new-agent"><a id="add-widget" href="#" data-action="add-widget" style="display: block; ">+</a></div>

              <div class="back create-widget-widget widget" id="wizard-step-one" style="display:none;">
                <span class="options beta"><a class="button" data-action="destroy" title="Entfernen"><span>Entfernen</span></a></span>
                <div class="category-container">
                  <div class="category icon" id="cww-analytics" title="Analytics"></div>
                  <div class="category icon" id="cww-intelligence" title="Intelligence"></div>
                  <div class="category icon" id="cww-custom" title="Custom"></div>
                  <div class="category icon" id="cww-external" title="External"></div>
                </div>
              </div>
            </div>


//css
#widget-menu {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 0.5s linear;
}

.animate-vflip { -webkit-transform: rotateY(180deg); }
.animate-hflip { -webkit-transform: rotateX(180deg); }

 // javascript
  $("#add-widget").click(function(){
    $("#widget-menu").addClass('animate-vflip');
  });

  $("a[data-action='destroy']").click(function(){
    $("#widget-menu").addClass('animate-vflip');
  });