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

目录


效果


Vue组件

css样式

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模板

html 复制代码
<template>
    <div class="container" @mouseenter="MouseEnter" @mouseleave="MouseLeave" @mousemove="MouseMove">
        <div class="plane">
            <slot></slot>
        </div>
    </div>
</template>
  • 使用< slot >添加插槽,让组件可以添加子元素。这样方便复用,比如需要倾斜图片的时候添加图片子元素、需要倾斜按钮的时候添加按钮子元素即可。
  • 在vue组件中添加鼠标事件@mouseente、@mouseleave、@mousemove,检测鼠标位置并将其与子元素的三维变换值绑定,就可以实现面朝鼠标。

JS部分

javascript 复制代码
<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:开启鼠标离开倒计时。

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

相关推荐
张元清8 分钟前
解密苹果最新 Liquid Glass 效果:如何用代码重现 iOS 设计系统的视觉魔法
前端·css·面试
CF14年老兵13 分钟前
2025 年 React 在 Web 开发中的核心地位:优势、应用场景与顶级案例
javascript·react.js·redux
wuxuanok16 分钟前
八股——Kafka相关
java·笔记·后端·学习·kafka
还是大剑师兰特19 分钟前
Javascript面试题及详细答案150道之(046-060)
javascript·大剑师·js面试题
不可描述的两脚兽20 分钟前
学习笔记《区块链技术与应用》第六天 问答 匿名技术 零知识证明
笔记·学习·区块链
天下无贼20 分钟前
【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position
css·vue.js
橙某人34 分钟前
📆基于Grid布局完成最精简的日期组件
前端·javascript
Likeyou739 分钟前
HTML无尽射击小游戏包含源码,纯HTML+CSS+JS
javascript·css·html
Befool1 小时前
elpis - 前端全栈框架
javascript
前端Hardy1 小时前
这个你一定要知道,如何使用Pandoc创建HTML网页版文档?
前端·javascript·css