[分享]css做魔方拧动的动画

CSS做魔方拧动的动画效果一直受到许多开发者的青睐。本文将会向大家分享如何使用CSS3动画特效达到魔方旋转的效果。 .cube { : relative; transformstyle: preser...

CSS做魔方拧动的动画效果一直受到许多开发者的青睐。本文将会向大家分享如何使用CSS3动画特效达到魔方旋转的效果。

 .cube {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(15deg);
    animation: rotate 8s infinite linear;
  }
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    /* 四个面分别设置不同的位置属性*/
    transform: translateX(-50px) translateY(-50px) translateZ(50px);
  }
  #face-right {
    transform: rotateY(90deg) translateX(-50px) translateY(-50px) translateY(150px);
  }
  #face-back {
    transform: rotateY(180deg) translateX(-50px) translateY(-50px) translateZ(-150px);
  }
  #face-left {
    transform: rotateY(-90deg) translateX(-50px) translateY(-50px) translateY(-150px);
  }
  #face-top {
    transform: rotateX(-90deg) translateX(-50px) translateY(-150px) translateZ(50px);
  }
  #face-bottom {
    transform: rotateX(90deg) translateX(-50px) translateY(50px) translateZ(50px);
  }
  @keyframes rotate {
    from {
      transform: rotateX(0) rotateY(0);
    }
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  } 

上述CSS代码中，首先定义了一个父元素，其设定了perspective属性及transform-style属性来实现3D效果；同时还设置了animation属性，使得魔方旋转起来。接着定义了四个子元素，通过不同的transform属性实现了四个面的位置设定，其中的ID值定义了每个面的翻转方向，这可根据需要修改。

CSS3动画特效可以使得魔方旋转动画效果更为生动、自然，同时也为前端开发者展示了更多奇妙的设计想象。