效果是一个旋转的盒子，他会展开六个面，展开结束后，会旋转，鼠标移动上去会变色；
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'); } }) })