jquery 3D旋转前端交互效果

一、介绍

getBoundingClientRect() 返回的是矩形的集合，表示了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 以外的属性是相对于 视图窗口的左上角 来计算的。
效果演示

代码
需要先把父元素设置为3D

js代码

//鼠标跟随 3D 旋转动效
$('.about-item div').mousemove(function (e) {
    requestAnimationFrame(() => {
        const {x, y, width, height} = this.getBoundingClientRect()

        let calcX = -(e.clientY - y - (height / 2)) / 20
        let calcY = (e.clientX - x - (width / 2)) / 20

        $(this).css({
            transform: `rotateX(${calcX}deg) rotateY(${calcY}deg)`
        })
    })
}).mouseleave(function (e) {
    requestAnimationFrame(() => {
        $(this).css({
            transform: `rotateX(${0}deg) rotateY(${0}deg)`
        })
    })
})

主页还有更多前端交互效果