锤子科技效果3D效果原生JS代码练习

http://js.jirengu.com/negor/4/edit?html,output
参照了上面的代码将其js原生写了一下

<html>

    <head>
        <title>3D Hover效果</title>
        <meta charset="utf-8" />
        <style>
            body{
                position: relative;   
            }
            .border{
                border:1px solid #565656;
                width: 600px;
                height: 400px;
                position: relative;
                margin: 0 auto;
            }
            .content{
                width: 400px;
                height: 300px;
                background-color: orange;
                position: relative;
                margin: 0 auto;
                /* position: absolute; */
                /* left: 50%; */
                /* top: 50%; */
                /* transform:translate(-50%,-50%); */
            }
        </style>
    </head>
    <body>
        <div class="border">
            <div class="content">
                测试
            </div>
        </div>

        <script>
            var obj = document.getElementsByClassName('content')[0];
            obj.addEventListener("mousemove",function(evt){
                // console.log(evt)
                // var offset = 
                var x = evt.pageX - obj.offsetLeft;
                var y = evt.pageY - obj.offsetTop;
                var centerX = obj.offsetWidth/2;
                var centerY = obj.offsetHeight/2;
                var deltaX = x - centerX
                var deltaY = y - centerY
                var percentX = deltaX / centerX
                var percentY = deltaY / centerY
                var deg = 10
                obj.style.transform='rotateX('+deg*-percentY + 'deg)'+
                ' rotateY('+deg*percentX+'deg)';

            });
        </script>

    </body>
</html>

效果图

总结

效果怪怪的是不是没算对？
我没写鼠标移除时的效果之后再补充

锤子科技效果3D效果原生JS代码练习

总结

猜你喜欢