锤子banner

查看效果：

http://js.jirengu.com/negor/4/edit?html,output

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        *{box-sizing: border-box;}
        div#test{
            width: 100%;
            height: 500px;
            background: white;
            padding: 100px 0;
            margin: 100px auto;
            border: 1px solid;

            perspective: 1000px;
        }

        #banner{
            height: 300px;
            width: 400px;
            margin: 0 auto;
            background:  #37D7B2;
            transition: transform 0.1s;
            box-shadow: 0 0 15px rgba(0,0,0,0.25);
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            color: #fff;
        }

        body{
            background: white;
            padding: 20px;
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="test">
    <div id="banner" >banner</div>
</div>
<script>
    $('#test').on('mousemove', function(e){

        var offset = $('#test').offset()

        var x = e.pageX - offset.left
        var y = e.pageY - offset.top


        var centerX = $('#test').outerWidth() /2
        var centerY = $('#test').outerHeight() /2

        var deltaX = x - centerX
        var deltaY = y - centerY

        var percentX = deltaX / centerX
        var percentY = deltaY / centerY

        var deg = 10

        $('#banner').css({
            transform: 'rotateX('+deg*-percentY + 'deg)'+
            ' rotateY('+deg*percentX+'deg)'
        })
    })
</script>
</body>
</html>

 

posted @ 2016-12-05 14:02  最爱小虾  阅读(183)  评论(0)  编辑  收藏  举报