原生JS实现图片3D旋转效果(点击一次停止，再次点击继续)

最新推荐文章于 2024-12-30 17:34:22 发布

Lucky铂爵

最新推荐文章于 2024-12-30 17:34:22 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_44816309/article/details/106803888

本文详细介绍了一种利用HTML和CSS实现的3D图片旋转效果，通过transform属性和perspective属性，结合JavaScript动态控制旋转角度，使图片在三维空间中进行平滑旋转，同时加入了图片阴影和倒影效果，增强视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整代码：

<!DOCTYPE html >
<html lang="en" onselectstart="return false;">
	<head>
		<meta charset="UTF-8">
		<title>3D图片旋转</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #000;
			}

			#box {
				width: 133px;
				height: 200px;
				margin: 100px auto;
				position: relative;
				/* border: 1px solid #fff; 测试用到*/
				transform-style: preserve-3d;
				/*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
				/*perspective:800px;*/
				/*3.设置透视距离*/
				transform: perspective(800px) rotateX(-15deg) rotateY(0deg);
			}

			#box img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 3px;
				box-shadow: 0px 0px 5px #fff;
				/*4.设置图片阴影*/
				-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, .6));
				/*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
				/*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
			}
		</style>
	</head>
	<body>
		<div id="box" onclick="show()">
			<img src="./img/1.jpg">
			<img src="./img/2.jpg">
			<img src="./img/3.jpg">
			<img src="./img/4.jpg">
			<img src="./img/5.jpg">
			<img src="./img/6.jpg">
			<img src="./img/7.jpg">
			<img src="./img/8.png">

		</div>
		<script>
			//当页面加载完毕后再执行代码
			window.onload = function() {
				//1.获取元素
				var oWrap = document.getElementById('box');
				var oImg = oWrap.children;
				var deg = 360 / oImg.length; //3.每个需要旋转的度数
				// 定义一个开始的度数
				var roX = -10;
				var roY = 0;
				var x, y, x_, y_, xN, yN, time = null;
				//2.遍历所有的img标签
				for (var i = 0; i < oImg.length; i++) {
					oImg[i].style.transform = 'rotateY(' + i * deg + 'deg) translateZ(350px)';
					oImg[i].style.transition = ' all 1s ' + (oImg.length - i - 1) * 0.1 + 's';
					//transition:设置过渡
					oImg[i].ondragstart = function() {
						return false;
					}
				}
				document.onmouseenter = function(e) {
					clearInterval(time);
					run()
				}
				document.onmouseleave = function(e) {
					clearInterval(time);
				}
				//给盒子添加点击事件
				let box1 = document.getElementById("box");
				let kg = true
				box1.show = function() {
					kg = !kg;
					if (kg) {
						clearInterval(time);
						run()
					} else {
						clearInterval(time);
					}
				}
				// 封装定时器
				function run() {
					time = setInterval(function() {
						roY -= 5 * 0.2;
						oWrap.style.transform = 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
					}, 100)
				}
			}
		</script>
	</body>
</html>