纯CSS实现3D翻牌效果

浏览数：21 / 时间：2015年06月09日

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果，简易效果请大家狠戳这里在线体验，或下载收藏。

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

<div class="container">
  <div class="flip X">
    <div class="front" data-text="Gongfu panda"></div>
    <div class="back" data-text="Toy story"></div>
  </div>
  <div class="flip Y">
    <div class="front" data-text="Gongfu panda"></div>
    <div class="back" data-text="Toy story"></div>
  </div>
</div>

嗯，接下来看看CSS，首先我们需要布局好元素

/* 顶部的盒子 */
.container{
  width:1320px;
  margin:50px auto;
}
/* 翻转类样式 */
.flip{
  width:640px;
  height: 320px;
  margin:10px;
  float:left;
  position: relative;
}
/* 前后两个类的共同样式 */
.flip div{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 2px 2px 20px rgba(0,0,0,.5);
}
/* 提示文本利用：before伪对象到位 */
.flip div: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 div.front{
  background: url(http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);
  z-index: 1;
}
.flip div.back{
  background: url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
  z-index: 2;
}

然后我们需要让flip响应hover事件，添加transform和transition

/* 翻转类样式 */
.flip{
  /*其他代码略*/
  /* 设置景深 */
  perspective: 1000px;
}
/* 前后两个类的共同样式 */
.flip div{   /*其他代码略*/
 transition: all 1s ease; transform-style: preserve-3d; backface-visibility: hidden;}/* hover之后的垂直位置 */.flip:hover div.front{ z-index: 2;;}.flip:hover div.back{ z-index: 1;;}/* rotateY的响应 */.Y div.back{ transform:rotateY(180deg);}.Y:hover div.front{ transform:rotateY(180deg);}.Y:hover div.back{ transform:rotateY(0deg);}/* rotateX的响应 */.X div.back{ transform:rotateX(180deg);}.X:hover div.front{ transform:rotateX(180deg);}.X:hover div.back{ transform:rotateX(0deg);}
好的，简易效果完工！接下来我们事先slider，单击播放下一个图像，到这里看效果。这个效果用了input单选框来实现单击事件。<div class="gallery">
	<input type="radio" name="images" id="p1" checked="checked" />
	<input type="radio" name="images" id="p2" />
	<input type="radio" name="images" id="p3" />
	<input type="radio" name="images" id="p4" />
	<input type="radio" name="images" id="p5" />
  <div class="container">
		<div class="front"></div>
		<div class="back"></div>
		<label for="p1"></label>
		<label for="p2"></label>
		<label for="p3"></label>
		<label for="p4"></label>
		<label for="p5"></label>
  </div>
</div>CSS部分也要改进下。


.gallery {
 
}
.gallery input {
    display:none;
    position:absolute;
}
.container {
    position: relative;
    height:640px;
    width:320px;
    transition: 1.5s ease-in-out;
}
.container div {
    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 div.front {
    transform: rotateY(180deg);
}
.container div.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 div.front {
    transform: rotateY(0deg);
}
input:nth-of-type(2n+1):checked ~ .container div.front {
    transform: rotateY(180deg);
}
input:nth-of-type(2n):checked ~ .container div.back {
    transform: rotateY(-179.9deg);
}
input:nth-of-type(2n+1):checked ~ .container div.back {
    transform: rotateY(0deg);
}

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

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

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

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

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