<style>

.dhb66{ width:300px; height:300px; border:1px solid #f00;}

.dhb66:hover{

box-shadow: 3px 3px 6px rgba(0,0,0,0.2);

-webkit-transform: translate(-2px,-2px);

-moz-transform: translate(-2px,-2px);

-ms-transform: translate(-2px,-2px);

-o-transform: translate(-2px,-2px);

transform: translate(-2px,-2px);

transition: all ease-in-out .1s;

}

</style>

<!--------- 的动画如下：---------------------------->

transition: transform .2s ease-in;

<!---------淘宝小三角的动画如下：---------------------------->

<b></b>

b {

-webkit-backface-visibility: hidden;

display:inline-block;

vertical-align:middle;

width: 0;

height: 0;

border-width: 30px;

border-style: solid dashed dashed;

border-color: #000 transparent transparent;

font-size: 0;

line-height: 0;

color:#999;

}

b:hover{

-webkit-backface-visibility: hidden;

border-color: #bbb transparent transparent;

-webkit-transition: -webkit-transform .2s ease-in;

-moz-transition: -moz-transform .2s ease-in;

-o-transition: -o-transform .2s ease-in;

transition: transform .2s ease-in;

-moz-transform: rotate(180deg);

-moz-transform-origin: 50% 30%;

-webkit-transform: rotate(180deg);

-webkit-transform-origin: 50% 30%;

-o-transform: rotate(180deg);

-o-transform-origin: 50% 30%;

transform: rotate(180deg);

transform-origin: 50% 30%

}

 

 

<!--------猪八戒的图片效果如下：--------------->

a img { -webkit-transition: margin-left 0.5s ease; -o-transition: margin-left 0.5s ease; transition: margin-left 0.5s ease; }

a:hover img { margin-left: -10px; }

<!----------------------->

<div class="canvas">

              <div class="inner">

                <div class="front">

                  <p>游戏统计分析</p>

                  <div><img src="/images/bgs/home/game.png" alt="#"></div>

                  <div class="shadow2"><img src="/images/bgs/home/point1.png" alt=""></div>

                </div>

                <div class="cricle-panel back">

                  <div class="logo"><img src="/images/bgs/home/game-hover.png" alt=""></div>

                  <h4>游戏统计分析</h4>

                  <p>全方位支持不同阶段的游戏运营需求</p>

                  <div class="shadow12"><img src="/images/bgs/home/point1.png" alt=""></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);

}