Google Style Text Flip & Rotate Effects with jQuery and CSS3

File Size: 1.88 KB
Views Total: 1390
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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;
  timer = setInterval(function() {
    if (cnt === 0) {
    } else if (cnt === 1) {
    } else if (cnt === 2) {
    } else if (cnt === 3) {
      cnt = -1;
  }, 790);
init = function() {
  $loading.text("Loading"); // replace the loading message

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