前端的小玩意（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');
        }
    })
})