倾斜效果

最新推荐文章于 2022-07-29 16:47:30 发布

小森呀

最新推荐文章于 2022-07-29 16:47:30 发布

阅读量474

点赞数

分类专栏：小案例文章标签：倾斜效果 3d

本文链接：https://blog.csdn.net/KEY2018/article/details/97032085

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

小森呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倾斜效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>倾斜效果</title> <style type="text/css"> * { margin: 0; padding: 0; } bo...
复制链接

扫一扫

专栏目录