纯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年的几个热词,你遇到了几个呢?

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!