AitSchool

3D-Box Demo

通过一下属性，绘制 3D 盒子

  • 透明颜色
  • 位移
  • 动画
  1. 定位 6 个面的位置
  2. 添加动画

提示：

前期开发中，可以使用透视辅助查看效果。

perspective: 400px;
  • HTML 结构
<div id="container">
  <div id="box">
    <div class="front"></div>
    <div class="down"></div>
    <div class="up"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>
  • CSS 样式
#container{
  width:198px;
  height:198px;
  margin:200px auto 0;

}
.front,.down,.up,.back,.left,.right{
  position: absolute;
  height: 198px;
  width: 198px;
} 
#box{
  transform-style: preserve-3d;
  transform-origin:99px 99px 0;
  /*perspective: 400px;*/
  /*animation:movingbox 8s ease-in-out infinite alternate;*/
}

.front{
  transform:translateZ(99px);
  background: rgba(159,190,212,0.8);
}
.down{
  transform:rotateX(-90deg)translateZ(99px);
  background: rgba(0,118,143,0.8);
}
.up{
  transform:rotateX(90deg)translateZ(99px);
  background: rgba(255,247,211,0.8);
}
.back{
  transform:rotateY(180deg)translateZ(99px);
  background: rgba(250,196,87,0.8);
}
.left{
  transform:rotateY(-90deg)translateZ(99px);
  background: rgba(255,79,73,0.8);
}
.right{
  transform:rotateY(90deg)translateZ(99px);
  background: rgba(75,53,56,0.8);
}

@keyframes movingbox{
  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)}
  100%{-webkit-transform:rotateX(135deg)}
}

← 套路 →