[分享]css3怎么画3d魔方

CSS3技术可以实现很多惊人的特效，其中之一就是用CSS3画3D魔方。那么究竟怎样用CSS3来实现呢？我们可以根据魔方的特点，分为6个面来实现。首先，我们需要先设置一个容器，用来承载整个魔方。 .cu...

CSS3技术可以实现很多惊人的特效，其中之一就是用CSS3画3D魔方。那么究竟怎样用CSS3来实现呢？我们可以根据魔方的特点，分为6个面来实现。

首先，我们需要先设置一个容器，用来承载整个魔方。

 .cube{
    perspective: ***px; 
    transform-style: preserve-3d;
    position: relative;
    margin: 120px auto;
  } 

这里设置了一个透视距离，用来模拟远近的效果，同时还设定了transform-style属性为preserve-3d，以确保子元素能按照3D效果相互独立呈现。

接下来，我们需要分别创建并设置样式，每一个魔方的面。在设置过程中，我们需要应用到一些基本的3D变换函数，如rotateX，rotateY，translateZ，来实现位移、旋转、拉近等效果。

 .cube .face{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #eee;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    font-size: 30px;
    text-align: center;
    line-height: 100px;    
  }
  .cube .front{
    transform: rotateY(0deg) translateZ(50px);   
  }
  .cube .back{
    transform: rotateY(180deg) translateZ(50px);
  }
  .cube .top{
    transform: rotateX(90deg) translateZ(50px);
  }
  .cube .bottom{
    transform: rotateX(-90deg) translateZ(50px); 
  }
  .cube .left{
    transform: rotateY(-90deg) translateZ(50px);   
  }
  .cube .right{
    transform: rotateY(90deg) translateZ(50px);    
  } 

最后，我们还可以添加一些交互效果，让魔方更具活力。例如，当用户鼠标悬停在魔方的某一面上时，我们就可以添加一个旋转的动画效果。

 .cube .face:hover{
    animation: rotateCube 1s linear infinite;
  }
  @keyframes rotateCube{
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  } 

如此，一个用CSS3实现的3D魔方，就开始呈现出魅力十足的效果了。当然，还有许多细节上的优化和完善值得我们去探索和尝试。