css3 3d立方体旋转

CSS3是前端设计中非常重要的一部分，其中的3D立方体旋转效果也是非常实用的一种效果。3D立方体旋转通过CSS3的transform属性，配合translateZ()和rotateY()实现透视效果，让页面中的元素具有了真实的立体性。

  .cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform .5s linear;
  }
 
  .cube .face {
    position: absolute;
    width: 200px;
    height: 200px;
    backface-visibility: hidden;
  }
 
  .cube .front {
    transform: translateZ(100px);
    background-color: #1abc9c;
  }
 
  .cube .back {
    transform: rotateY(180deg) translateZ(100px);
    background-color: #3498db;
  }
 
  .cube .right {
    transform: rotateY(90deg) translateZ(100px);
    background-color: #e74c3c;
  }
 
  .cube .left {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: #f1c40f;
  }
 
  .cube .top {
    transform: rotateX(90deg) translateZ(100px);
    background-color: #9b59b6;
  }
 
  .cube .bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background-color: #34495e;
  }
 
  .cube:hover {
    transform: rotateY(180deg);
  }

在上述代码中，.cube为立方体容器，.face为立方体每个面。通过transform-style: preserve-3d;属性启动立体属性，transform: rotateY(0deg);属性起始的角度为0，transition: transform .5s linear;为过渡效果，使动作看起来更为自然并平滑。

在每个.face的类名后分别使用颜色进行填充，同时通过transform属性设置不同的变换效果，从而完成3D样式的立方体旋转的动画效果。最后设置:hover时立方体进行旋转的交互效果，搭配前面的transition属性，交互起来非常流畅。