用Js和CSS实现锤子手机官网海报跟随移动发生倾斜_css 根据手机倾斜方向倾斜动画-CSDN博客

本文链接：https://blog.csdn.net/div_ma/article/details/72518234

挺久没写博客了, 最近学js模拟做了锤子手机的官方网站分享下他那个主页的海报轮播的倾斜效果是怎么做的;
锤子科技商城官网;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{
                width: 600px;
                margin:100px auto;
                /*perspective  是css透视属性 这个效果实现的关键 而且要加在父级*/
                perspective:800px;
            }
            #banner{
                width: 600px;
                height: 400px;
                background:red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id='banner'></div>
        </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
    </body>
    <script>

        var box=document.getElementById('box');
        var banner=document.getElementById('banner');
        box.onmousemove=function(e){
            e=e||event;
            //获取banner的X轴的中心 和 y轴的中心
            var centerX=banner.offsetLeft+banner.offsetWidth/2;
            var centerY=banner.offsetTop+banner.offsetHeight/2;

            //获取鼠标到中心的位置距离
            //e.page指鼠标到banner到边缘的位置
            var deltaX=e.pageX-centerX;
            var deltaY=e.pageY-centerY;

            //获取鼠标到中心距离与中心长度的比率 距离中心越远比越大 倾斜角度越大
            var percentageX=deltaX/centerX;
            var percentageY=deltaY/centerY;
            //常数
            var deg=10;

            //个人觉得X轴旋转用Y轴的比率 y轴的旋转倾斜角度用X轴的比率  这样可用无视正负 都是有向下倾斜的感觉
            banner.style.transform="rotateX("+percentageY*-deg+"deg)"+"rotateY("+percentageX*deg+"deg)";
        }
        banner.onmouseleave=function(){
            banner.style.transform=''
        }
    </script>
</html>