效果是一个旋转的盒子,他会展开六个面,展开结束后,会旋转,鼠标移动上去会变色;
demo网址:
http://jianwangsan.cn/boxDemo
HTML代码:
这个盒子可以拖动
Top
Bottom
Left
Right
Back
Front
#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');
}
})
})