前端CSS-3D交互，跟随鼠标3D旋转（十五种css3鼠标hover效果）

如何实现前端CSS-3D交互，跟随鼠标3D旋转。

这期视频分享一个三D卡片的交互效果。图片会在鼠标滑入后跟随鼠标进行三D旋转。

要让卡片进行3D旋转，需要使用腾腾、rotate以及透视视剧perspective卡片。3D旋转效果只需要rotatex和rotatey的旋转就可以了。

通常情况下透视数据p2x的取值为五百px左右，这里设置为五百px。然后修改旋转xy的词，发现静态效果可以呈现出来。如何跟随鼠标？就需要监听鼠标滑入、滑动、滑出事件。

首先需要给滑动设置一个确定旋转范围，然后在鼠标移动监听的时候进行计算。计算公式非常常见，就不再赘述。

最后把值复制给旋转的xy，通过css变量的方式进行复制。然后在鼠标滑出的时候再把旋转的xy复制为零，就实现了这个功能。

插入滑出的时候没有过渡效果，比较生硬。可以加上过渡效果，但是因为旋转的xy值修改的频率太高了，过渡效果会有延迟。而且d bug看日志的时候还会卡的不行。也可以仅在鼠标滑出的时候增加过渡效果，这样在鼠标离开的时候就有过渡效果了。

但是鼠标滑入的时候还是会比较生硬，因为会接着跟鼠标旋转，所以体验还好。如果有小伙伴知道在反复去掉过渡效果的情况下滑入，如何处理过渡效果，欢迎在评论区进行讨论。那么这期视频就到这里结束了，喜欢的小伙伴可以帮忙点点赞，感谢大家的观看，拜拜。