一款CSS3 皇上翻牌子3D动画特效,鼠标滑过每张图片的时候都有一个3D的翻转动画,背面显示的图片可以自由替换,喜欢的童鞋请收下把。
页面的head部分,需要设置好页面各元素的样式,代码如下:
*,html,body{
margin: 10px auto;
padding: 0px;
}
.clearfix:after{
content: "";
clear: both;
display: block;
overflow: hidden;
height: 0px;
}
.container{
width: 1200px;
height: 600px;
background: url(images/hougong.jpg);
border:1px solid #ffeb3b;
border-radius: 10px;
/*景深加在哪个元素上,相当于眼睛在该元素的中间的正前方*/
perspective: 800px;
}
.container>h1{
text-align: center;
color: #ffeb3b;
font-weight: 500;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.container>ul{
width: 850px;
margin: 100px auto;
}
.container>ul>li{
width: 121px;
height: 221px;
float: left;
margin:0px 10px;
list-style: none;
position: relative;
transform-style: preserve-3d;
transition: all 1s;
}
.container>ul>li:hover{
transform: rotateY(180deg);
}
/*前*/
.face1{
background: url(images/hougong1.jpg);
width: 81px;
height: 201px;
position: absolute;
top:50%;left:50%;
margin-left: -40.5px;
margin-top: -100.5px;
transform: translateZ(15px);
border-radius: 5px;
}
/*后*/
.face2{
background:url(images/hougong1.jpg);
width: 81px;
height: 201px;
position: absolute;
top:50%;left:50%;
margin-left: -40.5px;
margin-top: -100.5px;
transform: translateZ(-15px);
border-radius: 5px;
}
/*左*/
.face3{
background:url(images/boot.jpg);
width: 30px;
height: 201px;
position: absolute;
top:50%;left:50%;
margin-left: -15px;margin-top: -100.5px;
transform: rotateY(-90deg) translateZ(40.5px);
border-radius: 5px;
}
/*右*/
.face4{
background:url(images/boot.jpg);
width: 30px;
height: 201px;
position: absolute;
top:50%;left:50%;
margin-left: -15px;margin-top: -100.5px;
transform:rotateY(90deg) translateZ(40.5px);
border-radius: 5px;
}
.container>ul>li:nth-child(2)>.face1,.container>ul>li:nth-child(2)>.face2{
background-image: url(images/hongong2.jpg);
}
.container>ul>li:nth-child(3)>.face1,.container>ul>li:nth-child(3)>.face2{
background-image: url(images/hongong3.jpg);
}
.container>ul>li:nth-child(4)>.face1,.container>ul>li:nth-child(4)>.face2{
background-image: url(images/hongong4.jpg);
}
.container>ul>li:nth-child(5)>.face1,.container>ul>li:nth-child(5)>.face2{
background-image: url(images/hongong5.jpg);
}
.container>ul>li:nth-child(6)>.face1,.container>ul>li:nth-child(6)>.face2{
background-image: url(images/hongong6.jpg);
}
页面的body部分,需要将多个图片的li元素放入到div容器里,代码如下:
<div class="container">
<h1>皇上请翻牌</h1>
<ul class="clearfix">
<li>
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</li>
<li>
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</li>
<li>
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</li>
<li>
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</li>
<li>
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</li>
<li>
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</li>
</ul>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791