纯CSS3制作3d网红热词盒子

今天给大家分享的是CSS3制作的带3d效果的方块，上面简单整理了一下2019年的网红热词。这个DEMO用到了CSS3的3d变化技巧，做出来的效果还不错。请注意，该3d效果依赖 transform-style: preserve-3d 属性，必须在现代浏览器或IE11中才能看到效果。

盘他

柠檬精

OMG

我太难了

996

我信你个鬼

前端代码

HTML代码：

<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>

CSS3代码：

#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);
}
}

知识点提炼

1. 如果要用CSS3让一个元素呈现3D效果，该元素必须添加 transform-style: preserve-3d 属性，由于兼容性问题，一些老式浏览器是没有办法呈现3D效果的。
2. 3d盒子制作的思路是先让6个div重叠在一起，然后分别赋予每个面 transform 变幻。最关键的是我们需要清楚每个面变幻的轴心，3D轴心对应的属性是 transform-origin 。
3. 有些面上的文字在3D变化之后会出现显示错乱的问题，需要进行2次修正，因此你会看到有些面的属性包含了两个transform转换。
4. 3D坐标轴方向要牢记：屏幕横向为x轴，纵向为y轴，超越2次元连接我们眼睛和屏幕之间的直线是z轴，记住以上规律做3D变化会简单很多！

希望大家可以举一反三，做出更多好玩的3D特效。另外这个3D效果中总结的2019年的几个热词，你遇到了几个呢？

（全文完）