纯CSS实现3D翻牌效果

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前端开发技术,分享网页相关资源。
---------------------------------------------------------------


                
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值