前端实战小案例--根据鼠标位置而变化的卡片3D视差效果
想练习更多前端案例，请进个人主页，点击前端实战案例->传送门
觉得不错的记得点个赞?支持一下我0.0！谢谢了！
不积跬步无以至千里，不积小流无以成江海。
效果图如下：
代码如下：
<!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>