【node/vue】css制作可3D旋转倾斜的图片，朝向鼠标

效果

Vue组件

css样式

<style scoped>
.container {
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    perspective: 100px;
    display: flex;
        justify-content: center;
        align-items: center;
}

.plane {
    width: 80%;
    height: 80%;
    transform: rotateX(v-bind(mouseNow.y * -1 + 'deg'))
    	rotateY(v-bind(mouseNow.x * 1 + 'deg'));
}
</style>

• transform-style: preserve-3d的作用是让子元素处在3D空间中，对子元素进行三维旋转变换后，就可以呈现3D效果。
• 子元素超过父元素的部分不会显示，可以理解为父元素是观察子元素3D变换的一个窗口。
  

vue模板

<template>
    <div class="container" @mouseenter="MouseEnter" @mouseleave="MouseLeave" @mousemove="MouseMove">
        <div class="plane">
            <slot></slot>
        </div>
    </div>
</template>

• 使用< slot >添加插槽，让组件可以添加子元素。这样方便复用，比如需要倾斜图片的时候添加图片子元素、需要倾斜按钮的时候添加按钮子元素即可。
• 在vue组件中添加鼠标事件@mouseente、@mouseleave、@mousemove，检测鼠标位置并将其与子元素的三维变换值绑定，就可以实现面朝鼠标。

JS部分

<script>
export default {
    props: {
        smoothSpeed: {
            type: Number,
            default: 0.1,
        },
        resetTime: {
            type: Number,
            default: 300,
        }
    },
    data() {
        return {
            name: 'LeanPlane',
            mouseNow: {
                x: 0,
                y: 0,
            },
            mouseTarget: {
                x: 0,
                y: 0,
            },
            mouseMoveTimer: null,
            mouseLeaveTimer: null,
        }
    },
    methods: {
        MouseEnter() {
            clearInterval(this.mouseLeaveTimer)
            if (this.mouseMoveTimer != null)
                return
            this.mouseMoveTimer = setInterval(func => {
                this.mouseNow.x += (this.mouseTarget.x - this.mouseNow.x) * this.smoothSpeed
                this.mouseNow.y += (this.mouseTarget.y - this.mouseNow.y) * this.smoothSpeed
            }, 25)
        },
        MouseMove(event) {
            this.mouseTarget.x = (event.clientX - innerWidth / 2) / innerWidth
            this.mouseTarget.y = (event.clientY - innerHeight / 2) / innerHeight
        },
        MouseLeave() {
            this.mouseLeaveTimer = setTimeout(func => {
                this.mouseTarget = { x:0, y:0 }
            }, this.resetTime)
        },
    }
}
</script>

鼠标位置的计算：我们需要鼠标相对于屏幕中心的偏移百分比，即：从左到右，x值从-0.5到0.5；从下到上，y值从0.5到-0.5（鼠标y值从上到下由小变大）。
也就是：(鼠标位置 - 屏幕尺寸 / 2) / 屏幕尺寸。
计算完成后，使用v-bind(鼠标位置 + 'deg')将数值传递给元素样式。

• Props：该组件可传入两个参数。
  • smoothSpeed：平滑旋转到朝向鼠标位置的速度。
  • resetTime：鼠标离开到旋转回原位的时间。
• Data：
  • mouseNow：一直向鼠标的真实位置平滑趋近，作为现在图片的旋转值。
  • mouseTarget：鼠标真实位置，通过鼠标事件获取。
  • mouseMoveTimer：鼠标位置平滑趋近定时器。
  • mouseLeaveTimer：鼠标离开后，旋转回原位的倒计时。
• Methods：vue绑定了三个事件。
  • MouseEnter：清楚鼠标离开的倒计时，开启平滑趋近定时器。
  • MouseMove：鼠标移动的时候更新mouseTarget，获取最新的鼠标位置。
  • MouseLeave：开启鼠标离开倒计时。

正春华枝俏，待秋实果茂，愿与君共勉