JS+CSS3实现按压四角效果

前端开发 4年前 (2019) bestcyt
19 0 0

效果演示:https://www.cytqq.com/showreel/web-html/001.html

  • html+css代码:
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.parentAnimateBox {
		width: 355px;
		height: 421px;
		perspective: 800px;
		border: 1px solid red;
		overflow: hidden;
	}
	.childAnimateBox {
		width: 100%;
		height: 100%;
		background: url(img/asd.png) no-repeat left center;
		-webkit-transition: transform .2s;
		transition: transform .2s;
	}
</style>
</head>
<body>
<div class="parentAnimateBox">
	<div class="childAnimateBox">
	</div>
</div>
</body>
  • js代码:
<script type="text/javascript">
	$(function() {
		//outerWidth:元素的宽度	outerHeight:元素的高度
		var phoneW = $(".parentAnimateBox").outerWidth() / 2;
		var phoneH = $(".parentAnimateBox").outerHeight() / 2;
		var rotateStatic = 20;	//给一个初始值
		$(".parentAnimateBox").mousemove(function(e) {	//鼠标移入
			//pageY:鼠标位置,相对于可视浏览器边缘
			var pageY = e.pageY;
			var pageX = e.pageX;
			var tempX = pageX - phoneW;
			var tempY = pageY - phoneH;
			var datalX = tempX / phoneW;
			var datalY = tempY / phoneH;
			$(".childAnimateBox").css({
				//transform: rotate(45deg);	css3属性,旋转角度
				transform: 'rotateX(' + rotateStatic * -datalY + 'deg)' + 'rotateY(' + rotateStatic * datalX + 'deg)' +  'scale(1.1)'
			})
		});
		//鼠标移开事件
		$(".childAnimateBox").mouseleave(function(e) {
			$(".childAnimateBox").css({
				transform: ''
			})
		});
	})
</script>

 
JS+CSS3实现按压四角效果
JS+CSS3实现按压四角效果

版权声明:bestcyt 发表于 2019年2月18日 pm6:33。
转载请注明:JS+CSS3实现按压四角效果 | 爱前端导航

相关文章

联系站长