[分享]css六面体3d

十年前的网页设计大多基于平面，但现在越来越多的设计师想要在页面上运用更加丰富的元素，这就带来了许多创新的想法。其中之一就是css六面体3d效果，这种效果呈现几何学的形态，可以在网页设计中增强用户体验。...

十年前的网页设计大多基于平面，但现在越来越多的设计师想要在页面上运用更加丰富的元素，这就带来了许多创新的想法。其中之一就是css六面体3d效果，这种效果呈现几何学的形态，可以在网页设计中增强用户体验。

.cube-container{
  -webkit-perspective:***px;
  perspective:***px;
}
.cube{
  width:120px;
  height:120px;
  position:relative;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
 -webkit-transition:-webkit-transform 1s;
  transition:transform 1s;
}
.cube:hover{
  -webkit-transform:rotateX(90deg) rotateY(90deg);
  transform:rotateX(90deg) rotateY(90deg);
}
.cube .side{
  position:absolute;
  width:100%;
  height:100%;
  font-size:20px;
  color:#fff;
  text-align:center;
  line-height:120px;
}
.cube .front{
  background-color:#3498db;
}
.cube .back{
  background-color:#2ecc71;
   -webkit-transform:rotateY(180deg) translateZ(60px);
   transform:rotateY(180deg) translateZ(60px);
}
.cube .right{
  background-color:#e67e22;
   -webkit-transform:rotateY(-90deg) translateZ(60px);
  transform:rotateY(-90deg) translateZ(60px);
}
.cube .left{
  background-color:#e74c3c;
   -webkit-transform:rotateY(90deg) translateZ(60px);
  transform:rotateY(90deg) translateZ(60px);
}
.cube .top{
  background-color:#34495e;
   -webkit-transform:rotateX(90deg) translateZ(60px);
  transform:rotateX(90deg) translateZ(60px);
}
.cube .bottom{
  background-color:#9b59b6;
   -webkit-transform:rotateX(-90deg) translateZ(60px);
  transform:rotateX(-90deg) translateZ(60px);
} 

上面的代码演示了如何创建一个六面体，使用了preserve-3d来保持子元素在3d空间内对各自位置转换的保存，并添加了过渡效果和旋转角度。为了增强效果，每个面都有不同的背景颜色和旋转状态，从而在不同的角度呈现不同的面。可以尝试鼠标悬停六面体时的效果。

总之，通过使用css六面体3d效果，网页设计师可以为用户带来更加生动，立体感强的视觉体验，增加网页的吸引力和用户留存率。