一款利用html5和css3实现的3D滚动特效的教程

.side3{   
  background:#32526E;   
  -webkit-transform:rotateY(180deg) translateZ(100px);   
          transform:rotateY(180deg) translateZ(100px);   
}   
.side4{   
  background:#65A2C5;   
  -webkit-transform:rotateY(-90deg) translateZ(100px);   
          transform:rotateY(-90deg) translateZ(100px);   
}   
.side5{   
  background:#FFCC5C;   
  -webkit-transform:rotateX(90deg) translateZ(100px);   
          transform:rotateX(90deg) translateZ(100px);   
}   
.side6{   
  background:#FF6B57;   
  -webkit-transform:rotateX(-90deg) translateZ(100px);   
          transform:rotateX(-90deg) translateZ(100px);   
}   
  
@-webkit-keyframes rotate{   
  0%{   
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);   
  }   
  33.33%{   
     -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);       
  }   
  66.66%{   
     -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);   
  }   
  100%{   
     -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);   
  }   
}   
@keyframes rotate{   
  0%{   
    transform:rotateX(0deg) rotateY(0deg);   
  }   
  50%{   
    transform:rotateX(360deg) rotateY(0deg);       
  }   
  100%{   
    transform:rotateX(360deg) rotateY(360deg);   
  }   
}   
a{   
  font-family:helvetica;   
  color:#428bca;   
  text-align:center;   
  display:block;   
}   
  
.container2{   
  left:66%;   
}   
.container2 .side{   
  border-radius:50%;