maxtrid 3D视差 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>matrix</title>
    </head>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        
        body {
            color: white;
            font-family: sans-serif;
            font-size: 1.8em;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .content {
            margin: 1px;
            width: 140px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
        }
    </style>

    <body>

        <div class="wowpanel">
            <div class="content">move</div>
        </div>
        <div class="wowpanel">
            <div class="content">your</div>
        </div>
        <div class="wowpanel">
            <div class="content">cursor</div>
        </div>
        <div class="wowpanel">
            <div class="content">over</div>
        </div>

    </body>

</html>
<script>
    let angle = 45;
    let wowpanels = document.querySelectorAll(".wowpanel");
    let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];
    wowpanels.forEach(function(element,i){
        maxtridFun(element, colors[i]);
    });
    function maxtridFun(panel, color) {
        let content = panel.querySelector(".content");
        content.style.backgroundColor = color;
        panel.addEventListener('mouseout',function(e){
            content.style.transform = `perspective(300px) 
                                   rotateY(0deg)
                                   rotateX(0deg)`;
        });
        panel.addEventListener('mousemove', function(e){
            let w = panel.clientWidth,
                h = panel.clientHeight,
                y = (e.offsetX - w * 0.5) / w * angle,
                x = (1 - (e.offsetY - h * 0.5)) / h * angle;
            content.style.transform = `perspective(300px) 
                                   rotateX(${x}deg)
                                   rotateY(${y}deg)`;
        });
    }
</script>

 

posted on 2017-09-05 10:58  炫年华  阅读(172)  评论(0)    收藏  举报

导航