简单的3d照片旋转

九尘001

于 2022-04-14 20:20:12 发布

阅读量1k

点赞数 4

文章标签： CSS3 3D动画旋转效果 transform JavaScript

本文链接：https://blog.csdn.net/weixin_50542919/article/details/124180606

版权

效果图：可旋转

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>girl</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #000000;
		}
		.wrap{
			width: 200px;
			height: 200px;
			/* border: 1px solid green; */
			margin: 0 auto;
			margin-top: 200px;
			/* 定义3D元素距视图的距离，以像素计。
			当为元素定义透视图属性时，其子元素会获得透视效果，而不是元素本身 */
			perspective: 2000px;
		}
		.wrap>.imagesList{
			height: 200px;
			position: relative;
			/* 3D视图 */
			transform-style: preserve-3d;
		}
		.imagesList>img{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			box-shadow: 0 0 8px 0 #eee;
	    }
		.bottom{
			width: 1000px;
			height: 1000px;
			/* 底部渐变色背景 */
			background: radial-gradient(rgba(102,0,204,0.5)30%,rgba(0,0,0,0)80%);
			position: absolute;
			left: 50%;
			top: 0;
			margin-left: -500px;
			transform: rotateX(90deg);
			margin-top: -300px;
			border-radius: 50%;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="imagesList">
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<img src="img/105.jpg" />
				<div class="bottom"></div>
			</div>
		</div>
	</body>
	<script>
	window.onload=function(){
		var imageList = document.querySelector(".imagesList");
		var images = document.querySelectorAll(".imagesList>img");
		var len = images.length;
		//旋转的度数
		var imgDeg=360/len;
		for( var i=0; i<len;i++){
			images[i].style.transform="rotateY("+imgDeg*i+"deg) translateZ(400px)";
			images[i].style.transition="1.5s linear "+(len-1-i)*0.2+"s";
		}
		
		// 定时器
		var num =0;
		setInterval(function(){
			num++;
			//控制选择速度
			var sleep = num*0.5;
			imageList.style.transform="rotateX(-10deg) rotateY("+sleep+"deg)"
		},30)
	}
	</script>

</html>