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