js写了个鼠标进入卡片3D效果的demo

1、效果图

2、上代码 :)

js 复制代码
<template>
  <div class="w-150 h-180 p-12 perspective-1000px transform-style-preserve-3d transform-origin-0">
    <div id="demo" class="w-80 h-120 bg-rose-500 font-bold text-3xl text-center line-height-120 rounded-2xl cursor-grab pos-relative transform-style-preserve-3d shadow-black shadow-2xl">
      demo
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { ParallaxTiltEffect } from '@/utils/index.js'

onMounted(() => {
  const element = document.querySelector('#demo')
  new ParallaxTiltEffect(element)
})
</script>

<style lang="scss" scoped>
#demo{
  --X: 0;
  --Y: 0;
  transform: rotateX(var(--X)) rotateY(var(--Y));
  transition: all 0.5s ease;
}
</style>

封装了个class

js 复制代码
export class ParallaxTiltEffect{
  constructor(dom) {
    // 最大旋转角度
    this.maxRotateDeg = 20
    // 获取到元素
    this.element = dom
    // 获取宽高的一半
    this.halfW = this.element.clientWidth / 2
    this.halfH = this.element.clientHeight /2 
    this.init()
  }
  init(){
    // 绑定鼠标事件
    console.log('this', this);
    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){
    setTimeout(() => {
      this.setElementRotate(0, 0)
    }, 200)
  }
  setElementRotate(rotateX, rotateY){
    // js设置css变量的方式
    this.element.style.setProperty('--X', rotateX + "deg");
    this.element.style.setProperty('--Y', rotateY + "deg");
  }
}
相关推荐
晴殇i3 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟7 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览11 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少13 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z24 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z27 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog28 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构32 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙39 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1140 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter