前端实战案例11、根据鼠标位置变化的卡片3D视差效果

最新推荐文章于 2024-07-18 17:32:29 发布

耀南.

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量724

点赞数

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 3d

本文链接：https://blog.csdn.net/YN2000609/article/details/133621799

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.main{
				width: 400px;
				height: 500px;
				perspective: 1000px;
				transform-style: preserve-3d;
				transform-origin: 0 0;
			}
			.container{
				/* css定义变量的方式 */
				--X: 0;
				--Y: 0;
				position: relative;
				width: 400px;
				height: 500px;
				background-color: hsl(180, 20%, 90%);
				border-radius: 10px;
				transform-style: preserve-3d;
				box-shadow: 0 0 25px 10px hsla(0, 0%, 0%, .2);
				cursor: pointer;
				transform: rotateX(var(--X)) rotateY(var(--Y));
				transition: all 0.5s ease;
			}
		</style>
	</head>
	<body>
		<section class="main">
		    <div class="container container--1">
		    </div>
		</section>
		<script>
			class ParallaxTiltEffect{
				constructor(element) {
					// 最大旋转角度
					this.maxRotateDeg = 20
					// 获取到元素
				    this.element = document.querySelectorAll(element)[0]
					// 获取宽高的一半
					this.halfW = this.element.clientWidth / 2
					this.halfH = this.element.clientHeight /2 
					this.init()
				}
				init(){
					// 绑定鼠标事件
					this.element.addEventListener("mouseenter", this.handleMouseEnter.bind(this))
					this.element.addEventListener("mousemove", this.handleMouseMove.bind(this))
					this.element.addEventListener("mouseleave", this.handleMouseLeave.bind(this))
 
				}
				computed(offsetX, offsetY){
					// 获取鼠标位置距离元素中心点的距离, 然后除以 this.halfW，得到百分比
					let dxPercent = (offsetX - this.halfW) / this.halfW
					let dyPercent = -(offsetY - this.halfH) / this.halfH
					console.log(dxPercent,dyPercent,'11')
					let rotateX = this.maxRotateDeg * dxPercent
					let rotateY = this.maxRotateDeg * dyPercent
					console.log(rotateX,rotateY,'22')
					this.setElementRotate(rotateY,rotateX)
				}
				handleMouseEnter(e){
					let {offsetX, offsetY} = e
					// requestAnimationFrame设置刷新帧率随浏览器画面刷新而刷新
					requestAnimationFrame(() => {
						return this.computed(offsetX, offsetY)
					})
				}
				handleMouseMove(e){
					let {offsetX, offsetY} = e
					requestAnimationFrame(() => {
						return this.computed(offsetX, offsetY)
					})
				}
				handleMouseLeave(e){
					this.setElementRotate(0, 0)
				}
				setElementRotate(rotateX, rotateY){
					// js设置css变量的方式
					this.element.style.setProperty('--X', rotateX + "deg");
					this.element.style.setProperty('--Y', rotateY + "deg");
				}
			}
			let element1 = new ParallaxTiltEffect(".container")
		</script>
	</body>
</html>