CSS3实现的3d荷叶窗图片切换幻灯片特效

时间：2013-08-29 09:05 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3幻灯片</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.billboard {height:412px; width:600px; margin:0 auto; background:#369; padding:12px 10px 0 12px;
	-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}

.poster {float:left;width:50px; height:400px;
	-moz-perspective: 800px;
	-moz-perspective-origin: 50% 200px;
	-webkit-perspective: 800px;
	-webkit-perspective-origin: 50% 200px;
}

.triangle {position:relative; margin:0 auto; height:400px; width:50px;
	-moz-transform-style: preserve-3d;
	-moz-animation:rotateMe 18s infinite;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: rotateMe 18s infinite;
}

.face {position:absolute; height:400px; width:50px;}

.triangle .panel1 {background:url("http://i.gtimg.cn/qqlive/images/20130727/i1374861550_1.jpg?max_age=604800");
	background-size:600px auto;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-moz-transform: translateZ(14px);
	-webkit-transform: translateZ(14px);
}
.triangle .panel2 {background:url("http://i.gtimg.cn/qqlive/images/20130727/i1374861550_1.jpg?max_age=604800");
	background-size:600px auto;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-moz-transform: rotateY(120deg) translateZ(14px);
	-webkit-transform: rotateY(120deg) translateZ(14px);
}
.triangle .panel3 {background:url("http://i.gtimg.cn/qqlive/images/20130727/i1374861550_1.jpg?max_age=604800");
	background-size:600px auto;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-moz-transform: rotateY(-120deg) translateZ(14px);
	-webkit-transform: rotateY(-120deg) translateZ(14px);
}

@-moz-keyframes rotateMe {
	0% { -moz-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
	9% { -moz-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
	24% { -moz-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
	42% { -moz-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
	57% { -moz-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
	75% { -moz-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
	90% { -moz-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
	100% { -moz-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
}
@-webkit-keyframes rotateMe {
	0% { -webkit-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
	9% { -webkit-transform: rotateY(0deg) translateZ(0px) rotate(0deg);}
	24% { -webkit-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
	42% { -webkit-transform: rotateY(120deg) translateZ(0px) rotate(0deg);}
	57% { -webkit-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
	75% { -webkit-transform: rotateY(240deg) translateZ(0px) rotate(0deg);}
	90% { -webkit-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
	100% { -webkit-transform: rotateY(360deg) translateZ(0px) rotate(0deg);}
}

.triangle .p1 {background-position:left top;}
.triangle .p2 {background-position:-50px top;}
.triangle .p3 {background-position:-100px top;}
.triangle .p4 {background-position:-150px top;}
.triangle .p5 {background-position:-200px top;}
.triangle .p6 {background-position:-250px top;}
.triangle .p7 {background-position:-300px top;}
.triangle .p8 {background-position:-350px top;}
.triangle .p9 {background-position:-400px top;}
.triangle .p10 {background-position:-450px top;}
.triangle .p11 {background-position:-500px top;}
.triangle .p12 {background-position:-550px top;}

</style>
</head>
<body>
<section class="tips">
	<a href="http://www.html5sum.com/css3/1443.html" target="_blank">参见这里</a>
</section>
<div class="billboard">
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p1">
			</div>
			<div class="face panel2 p1">
			</div>
			<div class="face panel3 p1">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p2">
			</div>
			<div class="face panel2 p2">
			</div>
			<div class="face panel3 p2">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p3">
			</div>
			<div class="face panel2 p3">
			</div>
			<div class="face panel3 p3">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p4">
			</div>
			<div class="face panel2 p4">
			</div>
			<div class="face panel3 p4">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p5">
			</div>
			<div class="face panel2 p5">
			</div>
			<div class="face panel3 p5">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p6">
			</div>
			<div class="face panel2 p6">
			</div>
			<div class="face panel3 p6">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p7">
			</div>
			<div class="face panel2 p7">
			</div>
			<div class="face panel3 p7">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p8">
			</div>
			<div class="face panel2 p8">
			</div>
			<div class="face panel3 p8">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p9">
			</div>
			<div class="face panel2 p9">
			</div>
			<div class="face panel3 p9">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p10">
			</div>
			<div class="face panel2 p10">
			</div>
			<div class="face panel3 p10">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p11">
			</div>
			<div class="face panel2 p11">
			</div>
			<div class="face panel3 p11">
			</div>
		</div>
	</div>
	<div class="poster">
		<div class="triangle">
			<div class="face panel1 p12">
			</div>
			<div class="face panel2 p12">
			</div>
			<div class="face panel3 p12">
			</div>
		</div>
	</div>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

CSS3实现的3d荷叶窗图片切换幻灯片特效,CSS3幻灯片-3d荷叶窗图片切换，本效果不支持IE8，请在更高版本的IE9中测试，或使用火狐及Chrome浏览器等。本特效可作为网站的图片展示效果，图片大家自己换一下，换成像素大点的. CSS3实现的3d荷叶窗图片切换幻灯片特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/5516.html

CSS3实现的3d荷叶窗图片切换幻灯片特效

网页特效