CSS3实现鼠标跟随动态旋转效果

技术要点: CSS3中的3D旋转

要实现此效果，您需要对CSS3 3D旋转和JQuery有一定的了解，因为这是用于此效果的特定技术. 在这里，我将不详细解释这两个基本知识点，而仅解释具体的实现思路和实现代码.

我将此框划分为四个区域，这些区域将跟随更改. 当鼠标进入这四个不同区域时，会有不同的效果，但是它们的一般规则是相似的. 这一点将在代码中反映出来. 我们需要获取的值是其父元素所在的框的顶部和左侧的值，框本身的宽度和高度值以及鼠标的位置坐标. 通过这些值的计算，可以获得鼠标相对于盒子的坐标值，然后可以根据该坐标值动态改变盒子的旋转角度方向和尺寸值.

上面的实现代码:

<html>
    <head>
        <meta charset="UTF-8">
        <title>实现动态旋转角度变化title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                perspective: 500px;/*这个是设置盒子的透视度*/
                -webkit-perspective: 500px;
            }
            .box1{
                margin: 20px auto;
                width: 500px;
                height: 200px;
                background-color: #D58512;
                box-shadow: 0 0 10px rgba(0,0,0,0.5);
                transition: all 0.5s;
            }
        style>
        <script type="text/javascript" src="js/jquery.min.js">script>
        <script>
            $(function(){
                var bTop = $('.box1').offset().top;//盒子距离其父元素的top值
                var bLeft = $('.box1').offset().left;//盒子距离其父元素的left值
                var W = $('.box1').innerWidth();//盒子的长度width
                var H = $('.box1').innerHeight();//盒子的宽度height
                $('.box').mouseenter(function(){
                    $('.box1').mousemove(function(e){
                        var mX = e.pageX-bLeft;//鼠标相对盒子x轴坐标值
                        var mY = e.pageY-bTop;//鼠标相对盒子y轴坐标值
                        var xdeg = -(mY - H/2)/20;
                        var ydeg = (mX - W/2)/40;
                        if(mX<(W/2)&&mY<(H/2)){
                            $('.box1').css({"transform":"rotateX("+xdeg+"deg) rotateY("+ydeg+"deg)"});
                        }else if(mX<(W/2)&&mY>(H/2)){
                            $('.box1').css({"transform":"rotateX("+xdeg+"deg) rotateY("+ydeg+"deg)"});
                        }else if(mX>(W/2)&&mY<(H/2)){
                            $('.box1').css({"transform":"rotateX("+xdeg+"deg) rotateY("+ydeg+"deg)"});
                        }else if(mX>(W/2)&&mY>(H/2)){
                            $('.box1').css({"transform":"rotateX("+xdeg+"deg) rotateY("+ydeg+"deg)"});
                        }
                    });
                    $('.box1').mouseout(function(){
                        $('.box1').css({"transform":"rotateX(0deg) rotateY(0deg)"});
                        $('.box1').removeAttr('style');
                        $('.box1').mousemove = null;
                        $('.box1').mouseout = null;
                    });
                })
            });
        script>
    head>
    <body>
        <div class="box">
            <div class="box1">div>
        div>
    body>
html>

以下两行代码是关键点:

var xdeg = -(mY - H/2)/20;
var ydeg = (mX - W/2)/40;

通过将框分成两半，当鼠标的坐标值到达中心点时，没有旋转角度. 当它远离中心点时，会出现旋转角度. 可以通过动态获取此坐标值来确定，以动态更改旋转角度来达到此效果. 鼠标越靠近角落，旋转角度越大，否则旋转角度越小.

最终效果:

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-291547-1.html