A CodePen by atdrago.

index.html

<div>
  <h1>Adam Drago</h1>
</div>

script.js

$(function () {
  $("div").on("click", function () {
    $(this).toggleClass("animate");
    $("h1").toggleClass("animate");
  });
});

style.css

@keyframes whirl {
  0% {
    transform: matrix3d(
    1, 0, 1, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(
    1, 0, 1, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1);
  }
}
body {perspective: 700;}
div {
  width: 500px;
  height: 200px;
  margin: 20px auto;
  perspective: 700;
  transition: transform 2s ease;
  border: 5px solid black;
}
h1 {
  margin: 75px auto;
  width: 191px;
  text-align: center;
  transform: rotateY(0deg) translateZ(200px);
  overflow: hidden;
  padding: 10px;
  background: forestgreen;
  transition: transform 2s ease;
}
h1.animate {
  transform: rotateY(-360deg) translateZ(200px);
  /*animation: whirl 1s 2 ease alternate forwards;*/
}