Production of pure CSS3 box 3d network red hot words

Today to share with CSS3 box is made with 3d effect, above the simple red compiled a network of hot words 2019. The DEMO uses CSS3 3d change techniques, the results were pretty good to do it. Please note that the 3d effect depends transform-style: preserve-3dattribute, you must to see the effect in modern browsers or in IE11.

## front-end code

HTML code:

<div id="effect-3d-box">
  <div class="area">盘他</div>
  <div class="area">柠檬精</div>
  <div class="area">OMG</div>
  <div class="area">我太难了</div>
  <div class="area">996</div>
  <div class="area">我信你个鬼</div>
</div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

CSS3 Code:

#effect-3d-box {
  position: relative;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 80px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  animation: rotate 20s linear 0s infinite;
  -webkit-animation: rotate 20s linear 0s infinite;
}

#effect-3d-box > .area {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  color: white;
}

#effect-3d-box > .area:nth-child(2) {
  transform: translateZ(-100px) rotateX(180deg);
  -webkit-transform: translateZ(-100px) rotateX(180deg);
  -moz-transform: translateZ(-100px) rotateX(180deg);
  -ms-transform: translateZ(-100px) rotateX(180deg);
  -o-transform: translateZ(-100px) rotateX(180deg);
  background-color: #e67e22;
}

#effect-3d-box > .area:nth-child(3) {
  transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform-origin: 50% 0 0;
  background-color: #f1c40f;
}

#effect-3d-box > .area:nth-child(4) {
  transform: rotateX(90deg) rotateY(180deg);
  -webkit-transform: rotateX(90deg) rotateY(180deg);
  -moz-transform: rotateX(90deg) rotateY(180deg);
  -ms-transform: rotateX(90deg) rotateY(180deg);
  -o-transform: rotateX(90deg) rotateY(180deg);
  transform-origin: 50% 100% 0;
  background-color: #2ecc71;
}

#effect-3d-box > .area:nth-child(5) {
  transform: rotateY(90deg) rotateX(180deg);
  -webkit-transform: rotateY(90deg) rotateX(180deg);
  -moz-transform: rotateY(90deg) rotateX(180deg);
  -ms-transform: rotateY(90deg) rotateX(180deg);
  -o-transform: rotateY(90deg) rotateX(180deg);
  transform-origin: 0 50% 0;
  background-color: #3498db;
}

#effect-3d-box > .area:nth-child(6) {
  transform: rotateY(-90deg) rotateX(180deg);
  -webkit-transform: rotateY(-90deg) rotateX(180deg);
  -moz-transform: rotateY(-90deg) rotateX(180deg);
  -ms-transform: rotateY(-90deg) rotateX(180deg);
  -o-transform: rotateY(-90deg) rotateX(180deg);
  transform-origin: 100% 50% 0;
  background-color: #9b59b6;
}

@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
  to {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -moz-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -ms-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -o-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
}
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

## knowledge extraction

1. If you want to make a CSS3 3D rendering effect element, the element must be added to transform-style: preserve-3dproperty, due to compatibility issues, some older browsers is no way to render 3D effect.
2. 3d box making idea is to let 6 div overlap, then were given to each face transformchanges. The key is that we need to clear the axis of each face changing, 3D axis corresponding attribute transform-origin.
3. Some text will appear in the face of change after the 3D display disorder problems, the need for Amendment 2, so you will see some of the properties of the surface contains two transform conversion.
4. 3D coordinate axis to keep in mind: the screen lateral x-axis and y-axis is vertical, beyond the 2-dimensional linear connection between our eyes and the screen is z axis, remember the above rule changes will be much simpler to do 3D!

I hope you can learn by analogy, to make more fun 3D effects. Also this 3D effect is summarized in a few hot words 2019, you met some of it?