CSS3 皇上翻牌子3D动画特效

来源:https://www.sucaihuo.com/js/2401.html 2017-07-12 23:58浏览(1684) 收藏

一款CSS3 皇上翻牌子3D动画特效,鼠标滑过每张图片的时候都有一个3D的翻转动画,背面显示的图片可以自由替换,喜欢的童鞋请收下把。
CSS3 皇上翻牌子3D动画特效
分类:css3 > transform 难易:入门级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2