HTML-3D图片展示特效 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3d</title>
	</head>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		/*html,*/body{
			height: 100%;
			background: url(bg.jpg) no-repeat;
		}
		#box{
			background: url(pic.png) no-repeat;
			width:300px;
			height:200px;
			margin:180px auto;
			transform-style:preserve-3d ;/*子元素旋转父元素加上   为子元素声明3D空间*/
			position: relative;
			transform-origin: center;/*设置旋转中心点*/
			animation: move 14s linear infinite;
		}
		#box img {
			position: absolute;
			width: 250px;
			height: 300px;
			
		}
		@keyframes move{
			0%{transform: rotateY(0deg) rotateX(0deg) ;}
			25%{transform: rotateY(180deg) rotateX(20deg) ;}
			50%{transform: rotateY(360deg) rotateX(0deg) ;}
			75%{transform: rotateY(540deg) rotateX(-20deg) ;}
			100%{transform: rotateY(720deg) rotateX(0deg) ;}
		}
		/*#box img:nth-child(1){
			transform: rotateY(360deg);
		}*/
	</style>
	<body>
		<div id="box">
			<img src="photo01.jpg"/>
			<img src="photo02.jpg"/>
			<img src="photo03.jpg"/>
			<img src="photo04.jpg"/>
			<img src="photo05.jpg"/>
			<img src="photo06.jpg"/>
			<img src="photo07.jpg"/>
			<img src="photo08.jpg"/>
			<img src="photo09.jpg"/>
			<img src="photo10.jpg"/>
			
			
		</div>
		<embed src="sss.mp3" width="0px" height="0px" type="audio/mpeg" loop="true" autostart="true">		
	</body>
	<script type="text/javascript">
		var oimg=box.getElementsByTagName("img");
		for(var i=0;i<oimg.length;i++){
			oimg[i].style.cssText="transform:rotateY("+i*36+"deg) translateZ(500px)";
		}
		</script>
</html>

posted @ 2022-11-30 15:13  JackieDYH  阅读(7)  评论(0)  编辑  收藏  举报  来源