The effect

The coordinate figure

implementation

  1. Set up 3D container, basic structure
<div class="view">
  <div class="box">
    <div class="one">A</div>
    <div class="two">B</div>
    <div class="three">C</div>
    <div class="four">D</div>
    <div class="five">E</div>
    <div class="six">F</div>
  </div>
</div>
Copy the code
.view {
  width: 160px;
  height: 160px;
  margin: 80px auto;
}
.box {
  transform-style: preserve-3d; / / open3d
  perspective: 200px; / / the perspectivetransform-origin: 80px 80px 0; // Set rotation center}.box div {
  box-sizing: border-box;
  position: absolute;
  height: 160px;
  width: 160px;
  border: 3px solid # 000;
  background: rgba(255.200.100.8);
  text-align: center;
  font-size: 130px;
}
Copy the code

  1. Put the 6 faces in the corresponding positions (note the transform combination, which is from right to left, and has different results in different order)
.box .one {
  transform: translateZ(80px);
}

.box .two {
  transform: rotateX(-90deg) translateZ(80px);
}

.box .three {
  transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
}

.box .four {
  transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
}

.box .five {
  transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
}

.box .six {
  transform: rotateY(90deg) translateZ(80px);
}
Copy the code
  1. move
.box {
  animation: doit 3s ease-in-out infinite;
}

@keyframes doit {
  16% {
    -webkit-transform: rotateY(-90deg);
  }

  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(135deg);
  }

  50% {
    -webkit-transform: rotateY(225deg) rotateZ(135deg);
  }

  66% {
    -webkit-transform: rotateY(135deg) rotateX(135deg);
  }

  83% {
    -webkit-transform: rotateX(135deg); }}Copy the code

  1. Remove the perspective
.box {
  transform-style: preserve-3d; / / open3d
  perspective: 200px; / / the perspectivetransform-origin: 80px 80px 0; // Set rotation center}Copy the code