JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="container">
  <div class="box box-1">box</div>
</div>

<br />

<button>spin</button>

SCSS

.box {
  background-color: orchid;
  width: 100px;
  height: 100px;
  display: block;
  -webkit-transform: rotateZ(0) translateZ(120px);
  transform: rotateZ(0) translateZ(120px);
  -webkit-transition: transform 3s ease 0s;
  transition: transform 3s;
}

.spun {
  .box {
    background: lime;
  }
  .box-3 {
    transform: rotateZ(720deg) translateZ(120px);
  }

  .box-2 {
    transform: rotateY(720deg) translateZ(120px);
  }

  .box-1 {
    -webkit-transform: rotateX(720deg) translateZ(120px);
    transform: rotateX(720deg) translateZ(120px);
  }
}   
body {
  perspective: 1000px;
  margin: 2rem;
  text-align: center;
}

JavaScript

$('button').on('touchstart', function() {
	$('.container').toggleClass('spun');
})