CSS3幻灯片-3d荷叶窗图片切换

2020-01-27 14:17:34

字体：大中小

来源：转载

供稿：网友

CSS3幻灯片-3d荷叶窗图片切换，可作为网站的图片展示效果，图片大家自己换一下，换成像素大点的，本效果不支持IE8，请在更高版本的IE9中测试，或使用火狐及Chrome浏览器等。

<!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("/jscss/demoimg/wall5.jpg");	background-size:600px auto;	-webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden;	-moz-transform: translateZ(14px);	-webkit-transform: translateZ(14px);}.triangle .panel2 {background:url("/jscss/demoimg/wall5.jpg");	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("/jscss/demoimg/wall5.jpg");	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.cuoxin.com" 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>

上一篇：CSS3实现苹果产品图片360度旋转

下一篇：一个旋转的CSS3 transform-style3D效果