CSS3实现一个鼠标跟随动态旋转效果

最新推荐文章于 2022-09-06 17:40:11 发布

游尘牙

最新推荐文章于 2022-09-06 17:40:11 发布

阅读量7k

点赞数 2

分类专栏： css3 文章标签： css3 jquery 3d旋转 rotate3d

本文链接：https://blog.csdn.net/dydjtb/article/details/75668400

版权

本文介绍了如何使用CSS3的3D旋转和jQuery来创建一个鼠标跟随的动态旋转效果。通过将元素划分为四个区域，根据鼠标位置计算旋转角度，实现了鼠标靠近盒子边角时旋转角度增大的视觉效果。关键代码在于动态调整旋转角度以达到跟随鼠标的效果。

摘要由CSDN通过智能技术生成

技术点：CSS3里的3D旋转

实现这个效果需要对CSS3的3D旋转还有对JQuery有一定的认识，因为这是本效果具体使用到的技术；这里不去详细讲解这两个基础知识点，只讲具体实现思路以及实现代码。
坐标区域分析图
我将这个会跟随变化的盒子分成四个区域，鼠标在进入这不同的四个区域时，会有不一样的效果，但它们的总体规律是相似的，这点在代码里会有体现。我们需要获取的值有这个盒子距离它父元素的top和left值，还有盒子自身的width和height值，以及鼠标的位置坐标值。通过这几个值的计算，可以得到鼠标相对于这个盒子的坐标值，再根据这个坐标值去动态改变盒子的旋转角度方向与大小值。

以及上实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实现动态旋转角度变化</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                perspective: 500px;/*这个是设置盒子的透视度*/