JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="cube cube1"></div>
<br><br>
<div class="cube cube2"></div>
<br><br>
<div class="cube cube3"></div>

CSS

.cube {
  position:relative;
  height:50px;
  width:50px;
  background: red;
  animation-name: turn;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.cube2 {
  transform-origin: top right;
}

.cube3 {
  transform-origin: right 50%;
}



@keyframes turn {
  from {
    transform:rotate(0);
  }
  to {
    transform:rotate(360deg);
  }
}