可控制的CSS3D盒子动画

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

简易效果在线把玩请戳这里，下载收藏请戳这里。

优化效果在线把玩戳这里，下载收藏请戳这里。

我们需要两个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>

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

<div id="viewport">
   <div id="cube">
      <div id="front"></div>
      <div id="back"></div>
      <div id="top"></div>
      <div id="bottom"></div>
      <div id="left"></div>
      <div id="right"></div>
      </div>
</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远端库）。

  <link rel='stylesheet' href='http://codepen.io/assets/libs/fullpage/jquery-ui.css'>
  <script src='http://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>

然后我们可以使用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的使用，请大家参照官方网站。完工！

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

$(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，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------