<h2>rotateX</h2>

<div class="cube rotatex-animation">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

​

<h2>rotateY</h2>

<div class="cube rotatey-animation">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

​

<h2>rotateZ</h2>

<div class="cube rotatez-animation">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

html {

  width: 100vw;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0;

  font-family: sans-serif;

  text-align: center;

}

​

body {

  perspective: 700px;

}

​

.cube {

  width: 150px;

  height: 150px;

  margin: 50px 0;

  transform-style: preserve-3d;

}

​

.side {

  position: absolute;

  box-sizing: border-box;

  width: 150px;

  height: 150px;

​

  opacity: 0.7;

}

​

.front {

    transform: translateZ(75px);

    background-color: #ef5350;

}

​

.back {

    transform: translateZ(-75px);

    background-color: #ba68c8;

}

​

.left {

  transform: translateX(-75px) rotateY(90deg);

  background-color: #64b5f6;

}

​

.right {

  transform: translateX(75px) rotateY(90deg);

  background-color: #4dd0e1;

}

​

.top {

  transform: translateY(-75px) rotateX(90deg);

  background-color: #4db6ac;

}

​

.bottom {

  transform: translateY(75px) rotateX(90deg);

  background-color: #fff176;

}

​

.rotatex-animation {

  animation: rotateX 10s infinite;

}

​

.rotatez-animation {

  animation: rotateZ 10s infinite;

}

​

.rotatey-animation {

  animation: rotateY 10s 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);

  }

}