3d rotate transition

by alessandro_pezzato

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="container" id="container0"><h1>1</h1></div>
<div class="container" id="container1"><h1>2</h1></div>

CSS

.container {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    text-align: center;
}
#container0 {
    background: red;
}
#container1 {
    background: blue;
}

JavaScript

var $containers = [];
var currentCointainerIndex = 0;

$containers[0] = $("#container0");
$containers[1] = $("#container1");
hideRotating($containers[1]);

$(".container").click(function(e) {
  e.preventDefault();
  swap();
});

function swap() {
  console.log("swap " + currentCointainerIndex);
  var $currentContainer = currentContainer();
  var $nextContainer = swapContainer();
  hideRotating($currentContainer);
  showRotating($nextContainer);
}

function showRotating($el) {
  $el.transition({
    perspective : '100px',
    rotateY : '0deg'
  }, 1000, 'snap');
}

function hideRotating($el) {
  $el.transition({
    perspective : '100px',
    rotateY : '90deg'
  }, 1000, 'snap');
}

function swapContainer() {
  currentCointainerIndex = (currentCointainerIndex + 1) % 2;
  return $containers[currentCointainerIndex];
}

function currentContainer() {
  return $containers[currentCointainerIndex];
}