使用css 属性实现属性 3D 预览使用css transform-style: preserve-3d 属性实现属

线上预览图
可拖拽滚轮缩放放大实现代码
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<title>CSS3 3D旋转立方体</title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			.cube {
				width: 400px;
				height: 400px;
				-webkit-perspective: 1000px;
				margin: 200px auto 0 auto;
			}

			.ant {
				pointer-events: none;
				width: 100%;
				height: 100%;
				-webkit-transform-style: preserve-3d;
			}

			.ant2 {
				width: 100%;
				height: 100%;
				-webkit-transform-style: preserve-3d;
			}

			.ant3 {
				width: 100%;
				height: 100%;
				-webkit-transform-style: preserve-3d;
			}

			.face {
				width: 100%;
				height: 100%;
				position: absolute;
				border: 1px solid;
				-webkit-backface-visibility: visible;
				overflow: hidden;
				z-index: 10;
				text-align: center;
				font-size: 50px;
			}

			.face span {
				height: 100%;
				display: inline-block;
				vertical-align: middle;
			}

			.face-right {
				-webkit-transform: translate3d(200px, 0, 0px) rotateY(-90deg);
			}

			.face-left {
				-webkit-transform: translate3d(-200px, 0, 0px) rotateY(90deg);
			}

			.face-in {
				-webkit-transform: translate3d(0px, 0, -200px) rotateY(0deg);
			}

			.face-out {
				-webkit-transform: translate3d(0px, 0, 200px) rotateY(180deg);
			}

			.face-bottom {
				height: 400px;
				-webkit-transform: translate3d(0px, 200px, 0px) rotateX(90deg);
			}

			.face-top {
				height: 400px;
				-webkit-transform: translate3d(0px, -200px, 0px) rotateX(-90deg);
			}

			@-webkit-keyframes xuanzhuan {
				from {
					-webkit-transform: translate3d(0, 0, -200px) rotateY(0deg);
				}

				to {
					-webkit-transform: translate3d(0, 0, -200px) rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="cube">
			<div class="ant3">
				<div class="ant2">
					<div class="ant">
						<div class="face face-right"><span></span>1</div>
					<div class="face face-left"><span></span>2</div>
						<div class="face face-in"><span></span>3</div>
						<div class="face face-out"><span></span>4</div>
						<div class="face face-bottom"><span></span>5</div>
						<div class="face face-top"><span></span>6</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	let startX = 0;
	let startY = 0
	let distanceX = 0;
	let distanceY = 0;
	let ant = document.querySelector('.ant')
	let ant2 = document.querySelector('.ant2')
	let ant3 = document.querySelector('.ant3')

	document.addEventListener('mousedown', handleMouseDown);
	document.addEventListener('mousemove', handleMouseMove);
	document.addEventListener('mouseup', handleMouseUp);

	function handleMouseDown(event) {
		startX = event.clientX;
		startY = event.clientY
	}
	
	// 记录最后停止后移动的x y值
	let countX = 0
	let countY = 0

	function handleMouseMove(event) {
		if (startX) {
			if(countX == 0){
				distanceX =  event.clientX - startX;
				distanceY = event.clientY - startY
			}else{
				distanceX = countX +  event.clientX - startX
				distanceY = countY +  event.clientY - startY
			}
			ant.style.transform = `rotateY(${distanceX}deg)`
			ant2.style.transform = `rotateX(${distanceY * -1}deg)`
			// 右滑逻辑处理
		}
	}


	function handleMouseUp() {
		startX = 0;
		countX = distanceX
		countY = distanceY
	}

	// 添加滚轮事件监听器
	document.body.addEventListener('wheel', handleWheel, {
		passive: false
	});

	let count = 0
	// 滚轮事件处理函数
	function handleWheel(event) {
		// 阻止滚动条滚动
		event.preventDefault();

		// 判断滚轮方向
		if (event.deltaY < 0) {
			count += 100
		} else {
			count -= 100
		}
		ant3.style.transform = `translateZ(${count}px)`
	}
</script>
使用css 属性 实现属性 3D 预览

使用css 属性实现属性 3D 预览
