做了一个用鼠标拖拽配合 CSS3 的小尝试，截图如下：
熟悉拖拽效果的朋友应该不会陌生鼠标按住以后，左右拖动的实现方式。
这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中，
当拖动图片时，显示出立体的感觉～～
直接代码如下：
#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;} #list li{height:40px;width:400px; position:relative;cursor:pointer;-webkit-perspective:800px; } #list li div{height:40px;width:400px; -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;position:relative;-webkit-transform:translateZ(-200px);-webkit-transform:50ms all linear;} #list span{height:40px; width:400px; position:absolute;left:0;top:0; overflow:hidden;} #list div span:nth-child(1){background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(200px);} #list div span:nth-child(2){background:url(img/2.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(200px) rotateY(-90deg); } #list div span:nth-child(3){background:url(img/3.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(-200px); } #list div span:nth-child(4){background:url(img/4.jpg) no-repeat;-webkit-transform-origin:left;-webkit-transform:translateZ(200px) rotateY(90deg); } #list em{ width:400px;height:400px; position:absolute;left:0;background:#666;} #list li em:nth-of-type(1){-webkit-transform-origin:top;-webkit-transform:translateZ(200px) rotateX(-90deg); top:0;} #list li em:nth-of-type(2){-webkit-transform-origin:bottom;-webkit-transform:translateZ(200px) rotateX(90deg); bottom:0;} #list li:nth-last-child(1){ z-index:10;} #list li:nth-last-child(2){ z-index:20;} #list li:nth-last-child(3){ z-index:30;} #list li:nth-last-child(4){ z-index:40;} #list li:nth-last-child(5){ z-index:50;} #list li:nth-last-child(6){ z-index:60;} #list li:nth-child(2) span{ background-position:0 -40px;} #list li:nth-child(3) span{ background-position:0 -80px;} #list li:nth-child(4) span{ background-position:0 -120px;} #list li:nth-child(5) span{ background-position:0 -160px;} #list li:nth-child(6) span{ background-position:0 -200px;} #list li:nth-child(7) span{ background-position:0 -240px;} #list li:nth-child(8) span{ background-position:0 -280px;} #list li:nth-child(9) span{ background-position:0 -320px;} #list li:nth-child(10) span{ background-position:0 -360px;} #list li:nth-child(11) span{ background-position:0 -400px;} #btns{ width:130px; margin:0 auto;} #btns li{ width:20px;height:20px;background:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:20px; float:left; color:#f60; margin:0 3px; cursor:pointer;} #btns .active{ background:#f60;color:#fff;}
HTML
<ul> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol>
JAVASCRIPT