纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。

简易效果请大家狠戳这里在线体验，或下载收藏。

改进效果请大家戳这里在线体验，或下载收藏。

html部分我们用flip类做翻转的盒子，x和y两个类分别代表垂直翻转和水平翻转。front和back两个p做翻转图像的正面和反面。

/* 顶部的盒子 */
.container{
  width:1320px;
  margin:50px auto;
}
/* 翻转类样式 */
.flip{
  width:640px;
  height: 320px;
  margin:10px;
  float:left;
  position: relative;
}
/* 前后两个类的共同样式 */
.flip p{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 2px 2px 20px rgba(0,0,0,.5);
}
/* 提示文本利用：before伪对象到位 */
.flip p:before{
  content:attr(data-text);
  width:100%;
  height:30px;
  position:absolute;
  left:0;
  bottom:0;
  line-height:30px;
  text-align:center;
  color:#fff;
  background-color:rgba(0,0,0,.3);
}
/* 分别设置前后两个类的背景图像，垂直位置 */
.flip p.front{
  background: url(https://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);
  z-index: 1;
}
.flip p.back{
  background: url(https://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
  z-index: 2;
}

/* 翻转类样式 */
.flip{
  /*其他代码略*/
  /* 设置景深 */
  perspective: 1000px;
}
/* 前后两个类的共同样式 */
.flip p{ 
  /*其他代码略*/
  transition: all 1s ease; 
  transform-style: preserve-3d; 
  backface-visibility: hidden;
}
/* hover之后的垂直位置 */
.flip:hover p.front{ z-index: 2;;}
.flip:hover p.back{ z-index: 1;;}/
* rotateY的响应 */
.Y p.back{ transform:rotateY(180deg);}
.Y:hover p.front{ transform:rotateY(180deg);}
.Y:hover p.back{ transform:rotateY(0deg);}
/* rotateX的响应 */
.X p.back{ transform:rotateX(180deg);}
.X:hover p.front{ transform:rotateX(180deg);}
.X:hover p.back{ transform:rotateX(0deg);}

.gallery {
 
}
.gallery input {
    display:none;
    position:absolute;
}
.container {
    position: relative;
    height:640px;
    width:320px;
    transition: 1.5s ease-in-out;
}
.container p {
    position:absolute;
    left:0;
    top:0;
    width:640px;
    height:320px;
    transition: 1.5s ease-in-out;
    border:1px solid #888;
    backface-visibility: hidden;
    -webkit-perspective: 1200px;
}
.container p.front {
    transform: rotateY(180deg);
}
.container p.back {
    transform: rotateY(0deg);
}
.container label {
    display:block;
    width:640px;
    height:320px;
    position:absolute;
    left:0;
    top:0;
    display:none;
    cursor:pointer;
}
input:nth-of-type(2n):checked ~ .container p.front {
    transform: rotateY(0deg);
}
input:nth-of-type(2n+1):checked ~ .container p.front {
    transform: rotateY(180deg);
}
input:nth-of-type(2n):checked ~ .container p.back {
    transform: rotateY(-179.9deg);
}
input:nth-of-type(2n+1):checked ~ .container p.back {
    transform: rotateY(0deg);
}

#p1:checked ~ .container label:nth-of-type(2) {
    display:block;
}
#p1:checked ~ .container p.front {
    background:url(https://thecodeplayer.com/uploads/media/8k3N3EL.jpg);
}
#p1:checked ~ .container p.back {
    background:url(https://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);
}
#p2:checked ~ .container label:nth-of-type(3) {
    display:block;
}
#p2:checked ~ .container p.front {
    background:url(https://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
}
#p2:checked ~ .container p.back {
    background:url(https://thecodeplayer.com/uploads/media/8k3N3EL.jpg);
}
#p3:checked ~ .container label:nth-of-type(4) {
    display:block;
}
#p3:checked ~ .container p.front {
    background:url(https://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
}
#p3:checked ~ .container p.back {
    background:url(https://thecodeplayer.com/uploads/media/00kih8g.jpg);
}

#p4:checked ~ .container label:nth-of-type(5) {
    display:block;
}
#p4:checked ~ .container p.front {
    background:url(https://thecodeplayer.com/uploads/media/2rT2vdx.jpg);
}
#p4:checked ~ .container p.back {
    background:url(https://thecodeplayer.com/uploads/media/00kih8g.jpg);
}
#p5:checked ~ .container label:nth-of-type(1) {
    display:block;
}
#p5:checked ~ .container p.front {
    background:url(https://thecodeplayer.com/uploads/media/2rT2vdx.jpg);
}
#p5:checked ~ .container p.back {
    background:url(https://thecodeplayer.com/uploads/media/8k3N3EL.jpg);
}

完工！

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------