不会吧，不会吧，不会真有人现在还没有女朋友吧，学会这个「3D旋转相册」，教你一秒俘获女孩芳心，建议收藏

最新推荐文章于 2024-10-05 17:04:37 发布

CarryBircks

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量242

点赞数 2

分类专栏： JavaWeb小案例文章标签： css html javascript jquery 前端

本文链接：https://blog.csdn.net/qq_45958469/article/details/118493736

版权

JavaWeb小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML5、CSS3和jQuery创建一个3D立体相册效果。通过将图片围绕初始位置平移和旋转，实现照片墙的立体感。涉及到的关键技术包括CSS3的3D样式、图片定位、鼠标拖拽事件等，最终实现了一个可交互的3D相册，允许用户通过鼠标操作旋转相册查看不同角度的图片。

摘要由CSDN通过智能技术生成

3D相册

不会吧不会真有人认为仅靠一个3D相册就能俘获女孩芳心吧，听哥的，你把握不住，因为哥也没把握住，泪目，泪目…

废话不多说，直接上效果：
在这里插入图片描述
作为老白瞟党了，你们在想啥我都懂，想要源码，文末自取！！请把「良心」打在评论区
三连还是要求一下的，万一屏幕前的大帅弊，或者大漂亮就点赞了呢

接下来进入正题：

1 - 设计思路

要实现如图所示的照片墙，首要工作是如何使这些图片按照一定的规律围成一个圆？

首先，将所有要展示的图片集中在一点（即同一个位置），然后让它们围着初始位置平移相同的长度，就能够得到一个图片围成的圆
而要想实现立体效果，显然需要3D样式（可以参考『CSS进阶』中的3D样式，其中还有惊喜哦！）

故需要给其设置3d样式，并让其围绕初始位置沿x轴旋转（旋转角度可以用（360/n*i:n表示图片个数，i表示第几张图片）），并沿Z轴平移相同的距离
到此立体的感觉已经出来了，最后在给其加上一个旋转样式，就大功告成了

旋转样式其实与鼠标拖拽类似，可以参考『JQuery』一文中的鼠标拖拽

2 - 步骤实现

html页面

<html>
    <head>
        <meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div id="warp">
			<div id="content"></div>
		</div>
    </body>
</html>

给其3D样式，并让图片集中于页面中央

CSS代码

#warp {
		perspective: 1000px;
		/* 3D样式第二步 */
		width: 133px;
		height: 200px;
		margin: 170px auto;
		position: relative;
}

#warp>#content {
		width: 100%;
		height: 100%;
		/* 3D样式第一步 */
		transform-style: preserve-3d;
		position: relative;
}

定位11张图片，因为每一张图片一个div，页面放置11个div过于臃肿，故可以使用虚拟dom（可以参考『jQuery』一文）来实现

jQuery代码

// 初始化生成11个图片并放入content中成为其子元素
function creatDiv() {
	for (let i = 0; i < 11; i++) {
		const div = $('<div></div>')

		div.css({
			'background': 'url(img/' + (i + 1) + '.jpg)'
		})

		$('#content').append(div)
		// 将虚拟P标签添加到content下
		$('#content').append($('<p></p>'))
	}
}
				// 定位11个图片
function init() {
	for (let i = 0; i < $('#content>div').length; i++) {
		// 图片沿Y轴转动的角度
		const r = 360 / 11 * i
		// 3D样式设置
		$('#content>div').eq(i).css({
			'transition': '1s ' + (0.3 * i) + 's',
			'transform': 'rotateY(' + r + 'deg) translateZ(430px)'
		})
	}

}

基本已经结束，对其样式进行优化

CSS代码

#warp>#content>div {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/* 给每张图片一个弧度 */
	border-radius: 10px;
	/* 给图片加阴影: 下方显示 距离原图5px */
	-webkit-box-reflect: below 5px;
	/* 背景阴影: 右阴影 下阴影 锐化(看着如同发光一样) 阴影色 */
	box-shadow: 1px 1px 20px #ffaa7f;
}

/* 图片中间的圆形托盘样式 */
#warp>#content>p {
	width: 860px;
	height: 860px;
	background: -webkit-radial-gradient(center center, 400px 400px, #ffaa7f, rgba(0, 0, 0, 1));
	/* 先使其处于3d相册的中心 */
	position: absolute;
	top: 100%;
	left: 50%;
	border-radius: 430px;
	transform: translateX(-50%) translateY(-50%) rotateX(90deg);
}

给3d相册添加旋转样式（事件）

jQuery代码

// 按住下鼠标并移动可以旋转3d相册
function move(){
	let x = -12
	let y = 0
	$(document).mousedown(function(event) {
		// 创建触发事件的标志
		let flag = true
	
		// 获取鼠标按下时的座标
		let startx = event.pageX || event.clientX // 解决浏览器兼容问题(当无法从pageX中获取值时，就会从clientX中取值)
		let starty = event.pageY || event.clientY
		// console.log(startx)
		// console.log(starty)
		$(document).mousemove(function(ev) {
			// 当开关打开时，触发事件
			if (flag) {
				// 获取鼠标移动后的座标
				let endx = ev.pageX || ev.clientX
				let endy = ev.pageY || ev.clientY
	
				// 计算转动的角度(乘0.2是为了防止转动角度过大)
				x = (endx - startx) * 0.2 + x
				y = (endy - starty) * 0.2 + y
	
				// console.log(left)
				// console.log(top)
	
				// 设置图片的新转动角度
				$('#warp>#content').css({
					'transform': 'rotateX(' + y + 'deg) rotateY(' + x +
						'deg)',
				})
				// 本次移动的结束位置是下次移动的开始位置
				startx = endx
				starty = endy
			}
	
		})
		$(document).mouseup(function() {
			flag = false
		})
	})
}

0 - 0 - 0 源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #000000;
			}

			#warp {
				perspective: 1000px;
				/* 3D样式第二步 */
				width: 133px;
				height: 200px;
				margin: 170px auto;
				position: relative;
			}

			#warp>#content {
				width: 100%;
				height: 100%;
				/* 3D样式第一步 */
				transform-style: preserve-3d;
				position: relative;
				/* 给整体一个弧度 */
				transform: rotateX(-13deg)
			}

			#warp>#content>div {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				/* 给每张图片一个弧度 */
				border-radius: 10px;
				/* 给图片加阴影: 下方显示 距离原图5px */
				-webkit-box-reflect: below 5px;
				/* 背景阴影: 右阴影 下阴影 锐化(看着如同发光一样) 阴影色 */
				box-shadow: 1px 1px 20px #ffaa7f;
			}

			/* 图片中间的圆形托盘样式 */
			#warp>#content>p {
				width: 860px;
				height: 860px;
				background: -webkit-radial-gradient(center center, 400px 400px, #ffaa7f, rgba(0, 0, 0, 1));
				/* 先使其处于3d相册的中心 */
				position: absolute;
				top: 100%;
				left: 50%;
				border-radius: 430px;
				transform: translateX(-50%) translateY(-50%) rotateX(90deg);
			}
		</style>

		<script src="js/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div id="warp">
			<div id="content"></div>
		</div>
		<script>
			$(function() {
				// 使用初始化的图片div
				creatDiv()
				
				// 定位11张图片
				// 延迟执行（即在creatDiv()函数执行结束后50ms(时间自己给)开始执行init()函数）
				setTimeout(init, 50)
				
				// 实现旋转图片的功能
				move()

				// 初始化生成11个图片并放入content中成为其子元素
				function creatDiv() {
					for (let i = 0; i < 11; i++) {
						const div = $('<div></div>')

						div.css({
							'background': 'url(img/' + (i + 1) + '.jpg)'
						})

						$('#content').append(div)
						// 将虚拟P标签添加到content下
						$('#content').append($('<p></p>'))
					}
				}

				// 定位11个图片
				function init() {
					for (let i = 0; i < $('#content>div').length; i++) {
						// 图片沿Y轴转动的角度
						const r = 360 / 11 * i
						// 3D样式设置
						$('#content>div').eq(i).css({
							'transition': '1s ' + (0.3 * i) + 's',
							'transform': 'rotateY(' + r + 'deg) translateZ(430px)'
						})
					}

				}

				// 按住下鼠标并移动可以旋转3d相册
				function move(){
					let x = -12
					let y = 0
					$(document).mousedown(function(event) {
						// 创建触发事件的标志
						let flag = true
					
						// 获取鼠标按下时的座标
						let startx = event.pageX || event.clientX // 解决浏览器兼容问题(当无法从pageX中获取值时，就会从clientX中取值)
						let starty = event.pageY || event.clientY
						// console.log(startx)
						// console.log(starty)
						$(document).mousemove(function(ev) {
							// 当开关打开时，触发事件
							if (flag) {
								// 获取鼠标移动后的座标
								let endx = ev.pageX || ev.clientX
								let endy = ev.pageY || ev.clientY
					
								// 计算转动的角度(乘0.2是为了防止转动角度过大)
								x = (endx - startx) * 0.2 + x
								y = (endy - starty) * 0.2 + y
					
								// console.log(left)
								// console.log(top)
					
								// 设置图片的新转动角度
								$('#warp>#content').css({
									'transform': 'rotateX(' + y + 'deg) rotateY(' + x +
										'deg)',
								})
								// 本次移动的结束位置是下次移动的开始位置
								startx = endx
								starty = endy
							}
					
						})
						$(document).mouseup(function() {
							flag = false
						})
					})
				}
			
			})
		</script>
	</body>
</html>