3D背景图动画阴影效果

最新推荐文章于 2021-05-31 17:08:14 发布

Presbyterian

最新推荐文章于 2021-05-31 17:08:14 发布

阅读量752

点赞数

分类专栏： js动画文章标签：动画 3d hover动画

本文链接：https://blog.csdn.net/weixin_38023551/article/details/75168737

版权

js动画专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先看效果图

原理rotate的使用

当鼠标放到图片的一角处的时候，实现该处向下坍缩的效果，即用的是rotate的3D属性，此时的图片向相应的方向的进行偏转，偏转的角度x，y如下图所示：（与rotateZ无关）

需要注意的是偏转的x，y的正负值。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        section {
            margin: auto;
            width: 500px;
            height: 250px;
            margin-top: 100px;
        }
        .cover {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background-color: #5e5e5e;
        }
        /*transform*/
        section {
            position: relative;
            perspective: 1000px;
        }
        .cover {
            transform-origin: 50% 50% 0;
            transition: all .2s;
        }
    </style>
</head>
<body>
    <section>
        <div class="cover"></div>
    </section>
    <script>
        var origin = {
            X: document.body.clientWidth / 2,//可见区域宽度的一半
            Y: document.body.clientHeight / 2//可见区域高度的一半
        };
        var o = document.querySelector('.cover');
        document.querySelector('section').onmouseover = function() {
            document.querySelector('section').addEventListener('mousemove', function(e) {
            //      chrome：
            // e.pageX——相对整个页面的坐标
            // e.layerX——相对当前坐标系的border左上角开始的坐标
            // e.offsetX——相对当前坐标系的border左上角开始的坐标
            // e.clientX——相对可视区域的坐标
            // e.x——相对可视区域的坐标
                var rotate = {
                    x: 1 - e.pageY / origin.Y,//rotateX的偏转角度
                    y: e.pageX / origin.X - 1 //rotateY的偏转角度
                };
                var transform = "rotateX(" + rotate.x * 10 + "deg) rotateY(" + rotate.y * 10 + "deg)"; //变换效果
                o.style.transform = transform;
                o.style.boxShadow = -parseInt(rotate.y * 30) + 'px ' + parseInt(rotate.x * 20 + 20) + 'px ' + '50px #333'; //边框阴影效果
            });
        };
        document.querySelector('section').onmouseout = function() {
            o.style.transform = "rotateX(0deg) rotateY(0deg)";
            o.style.boxShadow = '0px 0px';
        }
    </script>
</body>
</html>`