【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)returnthis.mouseMoveTimer = setInterval(func => {this.mouseNow.x += (this.mouseTarget.x - this.mouseNow.x) * this.smoothSpeedthis.mouseNow.y += (this.mouseTarget.y - this.mouseNow.y) * this.smoothSpeed}, 25)},MouseMove(event) {this.mouseTarget.x = (event.clientX - innerWidth / 2) / innerWidththis.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：开启鼠标离开倒计时。

---

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