前端的小玩意（8）——旋转的盒子（纯CSS动画效果）＋可自由拖动（js）

效果是一个旋转的盒子，他会展开六个面，展开结束后，会旋转，鼠标移动上去会变色；

demo网址：

http://jianwangsan.cn/boxDemo

HTML代码：

<div id="Box_Background" class="container"><p>这个盒子可以拖动</p>    <div id="Box">        <div class="Box">            <div class="surface top">Top</div>            <div class="surface bottom">Bottom</div>            <div class="surface left">Left</div>            <div class="surface right">Right</div>            <div class="surface back">Back</div>            <div class="surface front">Front</div>        </div>    </div></div>

CSS代码：（注：我在demo里使用了bootsrap的.container这个类，以使其居中

#Box_Background {    position: relative;    height: 300px;    border: 1px solid #aaa;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}#Box {    perspective: 500px; /*透视距离是500px，值越大透视越明显，但这个不是z轴上的移动，不会影响图片的大小*/    perspective-origin: 50% 50%; /*透视角度，居中*/    position: absolute;    top: 100px;    left: 50%;    margin-left: -50px; /*这行和上一行用于居中设置*/    width: 100px;    height: 100px;    cursor: pointer;}a[href='/boxDemo'] {    color: #555;    text-decoration: none;    background-color: #e5e5e5;    -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);    -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);}.Box {    width: 100px;    height: 100px;    text-align: center;    transform-style: preserve-3d; /*设置子元素是否继承3d，这样写是true*/}.Box .surface {    position: absolute;    border: 1px solid black;    width: 100px;    height: 100px;    line-height: 100px;    text-align: center;}@keyframes top { /*keyframes开头的都是动画，deg是度*/    0% {    }    100% {        transform: rotateX(90deg) translateZ(50px)    }}@keyframes bottom {    0% {    }    100% {        transform: rotateX(-90deg) translateZ(50px)    }}@keyframes left {    0% {    }    100% {        transform: rotateY(-90deg) translateZ(50px)    }}@keyframes right {    0% {    }    100% {        transform: rotateY(90deg) translateZ(50px)    }}@keyframes front {    0% {    }    100% {        transform: translateZ(50px)    }}@keyframes back {    0% {    }    100% {        transform: translateZ(-50px) rotateY(180deg)    }}@keyframes all {    0% {    }    100% {        transform: rotate3d(1, 1, 1, 360deg)    }}.Box .top {    animation: top 1s both; /*动画名，动画时间，动画开始结束状态保持，下面有第四个参数是延迟播放时间*/}.Box:hover .top {    background: red;}.Box .bottom {    animation: bottom 1s both 1s;}.Box:hover .bottom {    background: blue;}.Box .left {    animation: left 1s both 2s;}.Box:hover .left {    background: green;}.Box .right {    animation: right 1s both 3s;}.Box:hover .right {    background: yellow;}.Box .back {    animation: back 1s both 4s;}.Box:hover .back {    background: pink;}.Box .front {    animation: front 1s both 5s;}.Box:hover .front {    background: GreenYellow;}.Box {    animation: all 3s both infinite 6s linear;}

拖动的JS代码：

$(document).ready(function () {    var move = false;   //移动标志，true为可以移动    var mouseX, mouseY, boxX, boxY;    $("#Box").mousedown(function (evt) {        mouseX = evt.clientX;   //这里的值是鼠标坐标        mouseY = evt.clientY;        boxX = parseInt($(this).css("margin-left"));    //只获取px之前的数字        boxY = parseInt($(this).css("margin-top"));        move = true;    })    $("#Box").mouseup(function (evt) {        move = false;    })    $("#Box_Background").mousemove(function (evt) {        if (!evt.buttons) { // 假如鼠标不是按下状态，那么取消移动，然后返回；因为在移动中鼠标取消按下，无法触发mouseup事件            move = false;            return;        }        var back = $("#Box_Background")[0];        //限制盒子离开目标区域（实际上没有完全限制，会最多出去一半。因此可以更完美，只是我没写）        if (evt.clientX < back.offsetLeft) {            evt.clientX = back.offsetLeft        } else if (evt.clientX > back.offsetLeft + back.clientWidth) {            evt.clientX = back.offsetLeft + back.clientWidth;        } else if (evt.clientY < back.offsetTop) {            evt.clientY = back.offsetTop;        } else if (evt.clientY > back.offsetTop + back.clientHeight) {            evt.clientY = back.offsetTop + back.clientHeight;        }        // 这里是修改margin-left和margin-top的值来达到移动盒子的效果        if (move) {            $("#Box").css("margin-left", boxX + (evt.clientX - mouseX) + 'px');            $("#Box").css("margin-top", boxY + (evt.clientY - mouseY  ) + 'px');        }    })})