旋转的盒子(纯CSS动画效果)+可自由拖动(js)

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

demo网址:

http://jianwangsan.cn/boxDemo

HTML代码:

这个盒子可以拖动

Top
Bottom
Left
Right
Back
Front

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');
        }
    })
})

你可能感兴趣的:(旋转的盒子(纯CSS动画效果)+可自由拖动(js))