可控制的CSS3D盒子动画

墨蓝 2022-08-25 08:42 230阅读 0赞

今天来看一个CSS 3D盒子动画，利用jqueryUI和jquery实现盒子动画的控制。

简易效果在线把玩请戳[这里][Link 1]，下载收藏请戳[这里][Link 2]。

优化效果在线把玩戳[这里][Link 3]，下载收藏请戳[这里][Link 4]。

![SouthEast][]

我们需要两个slider，一个input来控制盒子运动。

<div class="wrapper">
        <h4>Animate X axis</h4>
        <div id="sliderX"></div>
        <br>
        <h4>Animate Y axis</h4>
        <div id="sliderY"></div>
        <br>
        <input type="checkbox" /> Auto animate
    </div>

接着我们来做盒子，我们需要两个面

嗯，这样html文件就完成了，接下去是CSS（为了简化操作，我们还是用prefix free）。

.wrapper {
        width: 400px;
    }
    #viewport {
        perspective: 1000px;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
    }
    .animate {
        animation: myanim 5s infinite;
    }
    #cube {
        transform: rotateX(50deg) rotateY(50deg);
        transform-style: preserve-3D;
        transition: all 3s;
        width: 100%;
        height: 100%;
    }
    #cube div {
        width: 100%;
        height: 100%;
        position: absolute;
        color: #efefef;
        font-size: 140px;
        text-align: center;
    }
    #front {
        background: #556270;
        transform: translateZ(100px);
    }
    #back {
        background: #9C9F84;
        transform: translateZ(-100px) rotateY(180deg);
    }
    #top {
        background: #4ECDC4;
        transform: translateY(-100px) rotateX(90deg);
    }
    #bottom {
        background: #C7F464;
        transform: translateY(100px) rotateX(-90deg);
    }
    #left {
        background: #FF6B6B;
        transform: translateX(-100px) rotateY(-90deg);
    }
    #right {
        background: #C44D58;
        transform: translateX(100px) rotateY(90deg);
    }
    @keyframes myanim {
      0%  { transform: rotateX(0deg) rotateY(0deg); }
      50% { transform: rotateX(360deg) rotateY(360deg); }
      100% { transform: rotateX(0deg) rotateY(0deg); }
    }

我们这里仅仅是为每个面添加了不同的颜色，当然大家可以为每个面增加背景图像等等。

然后我们需要用js来实现对动画的控制，我们用到了jquery和jqueryUI，所以实际上我们需要把这些库引进来，恰似下面代码（用的是codepen远端库）。

然后我们可以使用jqueryUI了。

$(function () {
            $("#sliderX").slider({
                value: 50,
                min: 0,
                max: 360,
                animate: "fast",
                slide: function( event, ui ) {
                    $("#cube").css("transform", "rotateX(" + ui.value + "deg)")
                }
            });
    
            $("#sliderY").slider({
                value: 50,
                min: 0,
                max: 360,
                animate: "fast",
                slide: function( event, ui ) {
                    $("#cube").css("transform", "rotateY(" + ui.value + "deg)")
                }
            });
        
            $("input").on("click", function () {
                $("#cube").toggleClass("animate");
            });
    
        });

对于jQueryUI的使用，请大家参照[官方网站][Link 5]。完工！

效果进行了优化，增加了键盘的上下左右键控制。

$(function () {
        var xAngle = 0,
            yAngle = 0;
        //x轴Slider
        $("#sliderX").slider({
            value: 0,
            min: 0,
            max: 360,
            animate: "fast",
            slide: function (event, ui) {
                $("#cube").css("transform", "rotateX(" + ui.value + "deg)");
                xAngle = ui.value;
            }
        });
        //y轴Slider
        $("#sliderY").slider({
            value: 0,
            min: 0,
            max: 360,
            animate: "fast",
            slide: function (event, ui) {
                $("#cube").css("transform", "rotateY(" + ui.value + "deg)");
                xAngle = ui.value;
            }
        });
        //自动播放,autoplay
        $("input").on("click", function () {
            $("#cube").toggleClass("animate");
        });
     
        //上下左右控制，left、right、up、down
        $('body').keydown(function (evt) {
            switch (evt.keyCode) {
            case 37:
                // left
                yAngle -= 45;
                break;
     
            case 38:
                // up
                xAngle += 45;
                break;
     
            case 39:
                // right
                yAngle += 45;
                break;
     
            case 40:
                // down
                xAngle -= 45;
                break;
            };
            $("#cube").css("transform", "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)");
        });
    });

完工！敬请大家批评指正！  
\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/lskqF
[Link 2]: http://codepen.io/whqet/share/zip/lskqF
[Link 3]: http://codepen.io/whqet/pen/lnhBE
[Link 4]: http://codepen.io/whqet/share/zip/lnhBE
[SouthEast]: /images/20220824/68661ad3687e4e0bb445f233836b46a7.png
[Link 5]: https://jqueryui.com/
[whqet]: http://blog.csdn.net/whqet