Animated using CSS

by Tyler N.

HTML

<div class="animated-box">Click Me</div>

CSS

.animated-box {
  -webkit-transform-origin: 50% 50% 10px;
  -moz-transform-origin: 50% 50% 10px;
  -ms-transform-origin: 50% 50% 10px;
  transform-origin: 50% 50% 10px;
  -webkit-transform-style: preserve-3D;
  -moz-transform-style: preserve-3D;
  -ms-transform-style: preserve-3D;
  transform-style: preserve-3D;
  -webkit-transition:transform 2000ms cubic-bezier(.75, 1.2, .75, 1.2);
  -moz-transition:transform 2000ms cubic-bezier(.75, 1.2, .75, 1.2);
  -ms-transition:transform 2000ms cubic-bezier(.75, 1.2, .75, 1.2);
  transition:transform 2000ms cubic-bezier(.75, 1.2, .75, 1.2);
  width: 100px;
  height: 100px;
  background-color: pink;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  margin: 40px 0 0 40px;
  cursor: pointer;
}

.animated-box-go {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(36deg);
  transform: rotate(360deg);
}

JavaScript

$(function() {

	$('.animated-box').click(function() {
  	$(this).toggleClass('animated-box-go');
  });

});