前端的小玩意（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>

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

最后

以上就是俏皮发夹为你收集整理的前端的小玩意（8）——旋转的盒子（纯CSS动画效果）＋可自由拖动（js）的全部内容，希望文章能够帮你解决前端的小玩意（8）——旋转的盒子（纯CSS动画效果）＋可自由拖动（js）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。