倾斜效果

最新推荐文章于 2021-06-22 10:31:28 发布

原创最新推荐文章于 2021-06-22 10:31:28 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#倾斜效果 #3d

小案例专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的网页元素倾斜效果。通过跟踪鼠标位置，元素会根据鼠标的相对位置进行实时的X轴和Y轴旋转，从而创造出立体的倾斜视觉效果。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>倾斜效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				perspective: 500px;
				/*添加一个视距*/
			}
			
			div {
				width: 400px;
				height: 400px;
				background-color: gray;
				margin: 200px auto;
				transition: all 0.1s;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		var h = $('div').height() //获取要旋转元素的高度与宽度
		var w = $('div').width()
		var du = 5 //角度取值范围为0~90deg
		$('div').mousemove(function(e) {
			var x = e.clientX - $('div').offset().left //获取鼠标坐标在要旋转元素内的范围
			var y = e.clientY - $('div').offset().top
			var m = 2 * du / w * Math.abs(x - w / 2)
			var n = 2 * du / w * Math.abs(y - h / 2)
			if(x >= 0 && x < w / 2 && y >= 0 && y < h / 2) { //判断鼠标指针元素的哪一象限内
				jiaodu()
			} else if(x >= 0 && x < w / 2 && y >= 0 && y < h) {
				jiaodu()
			} else if(x >= 0 && x < w && y >= 0 && y < h / 2) {
				jiaodu()
			} else if(x >= 0 && x < w && y >= 0 && y < h) {
				jiaodu()
			}

			function jiaodu() { //要执行旋转的角度
				var p = y < h / 2 ? 1 : -1
				var q = x < w / 2 ? -1 : 1
				$('div').css({
					transform: 'rotateX(' + p * m + 'deg) rotateY(' + q * n + 'deg)'
				})
			}
		})
	</script>

</html>