JsとCSSでハンマー携帯サイトのポスターを実現移動に追随して傾きます


長い間ブログを書いていませんが、最近jsシミュレーションを学んでハンマー携帯電話の公式サイトを作って、彼のホームページのポスターの輪番放送の傾斜効果はどのようにしたのかを共有しました.ハンマー科学技術ショッピングモールの公式サイト;

<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>