<div class="canvas">
              <div class="inner">
                <div class="front">
                  <p>游戏统计分析</p>
                  <div><img src="http://www.mamicode.com/images/bgs/home/game.png" alt="#"></div>
                  <div class="shadow2"><img src="http://www.mamicode.com/images/bgs/home/point1.png" ></div>
                </div>
                <div class="cricle-panel back">
                  <div class="logo"><img src="http://www.mamicode.com/images/bgs/home/game-hover.png" ></div>
                  <h4>游戏统计分析</h4>
                  <p>全方位支持不同阶段的游戏运营需求</p>
                  <div class="shadow12"><img src="http://www.mamicode.com/images/bgs/home/point1.png" ></div>
                </div>
              </div>
            </div>
/*canvas transform*/
.canvas {
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
}
.canvas .inner{
  background:transparent;
}
.canvas .inner, .canvas .front, .canvas .back{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:160px;
  height:160px;
}
.canvas .inner, .canvas .inner {
  -webkit-perspective:200px;
  -moz-perspective:160px;
  -ms-perspective:160px;
  perspective:160px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
  -moz-transition:all 300ms;
  -o-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
  -ms-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
  transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275) 0;
}
.canvas .front, .canvas .back{
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
}
.canvas .back{
  display:none\9;
  display:none\0;
  -webkit-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  -ms-transform:rotateY(-180deg);
  -o-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}
.canvas .front{ z-index:8; }
.canvas.hover .front{ z-index:-1;display:none\9;display:none\0; }
.canvas.hover .front p{
  visibility:hidden;
}
.canvas.hover .inner{
  -webkit-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  -ms-transform:rotateY(-180deg);
  -o-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}
.canvas.hover .back{
  display:block\9; 
  display:block\0;
}
.canvas.hover .back p{
  -webkit-transform: translate3d(0px,0px,0px);
  -moz-transform: translate3d(0px,0px,0px);
  -ms-transform: translate3d(0px,0px,0px);
  -o-transform: translate3d(0px,0px,0px);
  transform: translate3d(0px,0px,0px);
}

CSS3动画【归纳总结】