JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div class="demo-block rotateX">沿X轴</div>
<div class="demo-block rotateY">沿Y轴</div>
<div class="demo-block rotateZ">沿Z轴</div>

CSS

.demo-block {
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: #CFC;
  margin: 50px;
  display: inline-block;
  text-align: center;
}

.rotateX {
  animation: rotateX 2s linear infinite;
}

.rotateY {
  animation: rotateY 2s linear infinite;
}

.rotateZ {
  animation: rotateZ 2s linear infinite;
}

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

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

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