简单的3d照片旋转

淩亂°似流年 2023-10-05 22:28 12阅读 0赞

效果图：可旋转

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16][]

实现代码：

<!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>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f3488f3b338341aab2751881747214f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16