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

最新推荐文章于 2021-12-17 21:29:40 发布

yatsov

最新推荐文章于 2021-12-17 21:29:40 发布

阅读量470

点赞数

分类专栏： CSS Javascript

本文链接：https://blog.csdn.net/yatsov/article/details/82118443

版权

Javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

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>

效果图

总结

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

yatsov

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锤子科技效果3D效果原生JS代码练习

http://js.jirengu.com/negor/4/edit?html,output 参照了上面的代码将其js原生写了一下&lt;html&gt; &lt;head&gt; &lt;title&gt;3D Hover效果&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;st..
复制链接

扫一扫

专栏目录