Google Style Text Flip & Rotate Effects with jQuery and CSS3

A cool jQuery snippet to create text flip & rotate animations using CSS3 transitions and transforms, similar to the loading animation you see in some Google products/apps. Great for creating a text-based loading spinner for your website/App.

How to use it:

1. Create an empty container element with CSS class of 'loading'.

<h2 class="loading"></h2>

2. The initial styles for the loading message.

h2 {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 28px;
  margin-top: -8px;
  cursor: default;
  -moz-transition: all ease-in-out 0.28s;
  -webkit-transition: all ease-in-out 0.28s;
  -o-transition: all ease-in-out 0.28s;
  transition: all ease-in-out 0.28s;
  -moz-transform-origin: 50% 50% 50%;
  -webkit-transform-origin: 50% 50% 50%;
  -o-transform-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
}

3. Create the step-based text flip effect using CSS3 transforms.

.step1 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  color: #d64035 !important;
}

.step2 {
  -webkit-transform: rotateY(180deg) rotateX(180deg);
  -moz-transform: rotateY(180deg) rotateX(180deg);
  transform: rotateY(180deg) rotateX(180deg);
  color: #f9c63f !important;
}

.step3 {
  -webkit-transform: rotateY(360deg) rotateX(180deg);
  -moz-transform: rotateY(360deg) rotateX(180deg);
  transform: rotateY(360deg) rotateX(180deg);
  color: #4485f4 !important;
}

.step4 {
  -webkit-transform: rotateY(360deg) rotateX(360deg);
  -moz-transform: rotateY(360deg) rotateX(360deg);
  transform: rotateY(360deg) rotateX(360deg);
  color: #099e57 !important;
}

4. Include the necessary jQuery library at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

5. The javascript to enable the text flip animation on document ready.

var timer, init, start, $loading;
$loading = $(".loading");
start = function() {
  var cnt = 0;
  clearInterval(timer);
  timer = setInterval(function() {
    if (cnt === 0) {
      $loading.removeClass("step4").addClass("step1");
    } else if (cnt === 1) {
      $loading.removeClass("step1").addClass("step2");
    } else if (cnt === 2) {
      $loading.removeClass("step2").addClass("step3");
    } else if (cnt === 3) {
      $loading.removeClass("step3").addClass("step4");
      cnt = -1;
    }
    cnt++;
  }, 790);
}
init = function() {
  $loading.text("Loading"); // replace the loading message
  start();
}
init();

---

This awesome jQuery plugin is developed by koheishingai. For more Advanced Usages, please check the demo page or visit the official website.