基于css的多种纸牌3D翻转效果

Rollover
翻转
Fade
淡入淡出
Flip
翻转
Flip Up
向上翻转
Flip Box
翻转框
Flip Box Fade
翻转框淡入淡出
Flip Box Fade Up
翻转框淡出
Flip Box Fade Hideback
翻转框淡出隐藏
Flip Box Fade Up Hideback
翻转框淡出隐藏
Nananana
旋风旋转缩小消失

css文件：

/*
  3D rollovers styles
  Homepage: http://github.com/codepo8/3Drollovers
  Copyright (c) 2011 Christian Heilmann
  Code licensed under the BSD License:
  http://wait-till-i.com/license.txt
*/
.rollover {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
}
.front {
  z-index: 2;
  position: absolute;
  background: #fff;
}
.back {
  z-index: 1;
  position: absolute;
  background: #fff;
}
.rollover:hover .back, 
.rollover:focus .back {
  z-index: 2;
}
.rollover:hover .front, 
.rollover:focus .front {
  z-index: 1;
}
.fade .rollover .front {
  opacity: 1;
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover .back {
  opacity: 0;
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover:hover .front, 
.fade .rollover:focus .front {
  opacity: 0;
}
.fade .rollover:hover .back, 
.fade .rollover:focus .back {
  opacity: 1;
}

.flip .rollover {
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
.flip .cube {
  height: 200px;
  width: 200px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
     -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
      -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
       -o-transform: rotateX(0) rotateY(0) rotateZ(0);
          transform: rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.flip .front {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.flip .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,0);
     -moz-transform: rotateY(180deg) translate3d(0,0,0);
      -ms-transform: rotateY(180deg) translate3d(0,0,0);
       -o-transform: rotateY(180deg) translate3d(0,0,0);
          transform: rotateY(180deg) translate3d(0,0,0);
}
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg); 
      -ms-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.up .front {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.up .back {
  -webkit-transform: rotateX(180deg) translate3d(0,0,0);
     -moz-transform: rotateX(180deg) translate3d(0,0,0);
      -ms-transform: rotateX(180deg) translate3d(0,0,0);
       -o-transform: rotateX(180deg) translate3d(0,0,0);
          transform: rotateX(180deg) translate3d(0,0,0);
}
.up .rollover:hover .cube, 
.up .rollover:focus .cube {
  -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.box .front {
  -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);
     -moz-transform: translate3d(0,0,100px) scale(0.85,0.85);
      -ms-transform: translate3d(0,0,100px) scale(0.85,0.85);
       -o-transform: translate3d(0,0,100px) scale(0.85,0.85);
          transform: translate3d(0,0,100px) scale(0.85,0.85);
}
.box .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.9,0.9);
     -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);
      -ms-transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.85,0.85);
       -o-transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.85,0.85);
          transform: rotateY(180deg) translate3d(0,0,100px)  scale(0.85,0.85);
}
.box.up .back {
  -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);
     -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
      -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
       -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
          transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);
}

.hideback .front, .hideback .back {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.nananana .rollover {
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
          
}
.nananana .rollover:hover .front, 
.nananana .rollover:focus .front {
  background: transparent;
  z-index: 10;
  -webkit-animation: batman 1s 2 alternate linear;
     -moz-animation: batman 1s 2 alternate linear;
      -ms-animation: batman 1s 2 alternate linear;
       -o-animation: batman 1s 2 alternate linear;
       animation: batman 1s 2 alternate linear;
}
@-moz-keyframes batman {
  0% { -moz-transform: scale(1,1) rotateZ(0); }
  100% { 
    -moz-transform: scale(0,0) rotateZ(720deg);
    opacity: 0;
  }
}
@-webkit-keyframes batman {
  0% { -webkit-transform: scale(1,1) rotateZ(0); }
  100% { 
    -webkit-transform: scale(0,0) rotateZ(720deg);
    opacity: 0;
  }
}
@-ms-keyframes batman {
  0% { -ms-transform: scale(1,1) rotateZ(0); }
  100% { 
    -ms-transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
@-o-keyframes batman {
  0% { -o-transform: scale(1,1) rotateZ(0); }
  100% { 
    -o-transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}
@keyframes batman {
  0% { transform: scale(1,1) rotateZ(0); }
  100% { 
    transform: scale(0,0) rotateZ(720deg); 
    opacity: 0;
  }
}

在线预览效果图http://mubanmao.top/content/preview/d010744f-484e-4a49-8b8d-15fdd1794831