css transform 3D投影片特效

JS

[javascript]$(function(){     var length = $(".container a").length;     var $items = $(".container a");      $items.on("transitionend", function(event){         $items.removeClass("trans");     });      $(".container a").each(function(index, value){         var $child = $(this);         if (index === 0) {             $child.addClass("current showing");         } else if (index === 1) {             $child.addClass("left showing");         } else if (index == 2) {             $child.addClass("out-left");         } else if (index == (length - 2)) {             $child.addClass("out-right");         } else if (index === (length - 1)) {             $child.addClass("right showing");         } else {             $child.addClass("hiding");         };

        $child.click(function(){             var $item = $(this);             //next item               var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1);             //previous item              var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);             var $rightItem;             if(index == 0){                 $rightItem = $items.eq(length - 2);             } else if (index == 1) {                 $rightItem = $items.eq(length - 1);             } else {                 $rightItem = $items.eq(index - 2);             }             var $leftItem;             if(index == length - 2){                 $leftItem = $items.eq(0);             } else if (index == length - 1) {                 $leftItem = $items.eq(1);             } else {                 $leftItem = $items.eq(index + 2);             }

            //current item click,return              if ($item.hasClass("current")) {                 return false;             } else if ($item.hasClass("left")) {                 //center move right                  $preItem.attr("class","trans right showing");                 //left move center                  $item.attr("class","trans current showing");                 //right item move out                  $rightItem.attr("class","trans out-right");                 //next move left                  $nextItem.attr("class","trans left showing");                 //left ready                  $leftItem.attr("class","out-left");             } else if ($item.hasClass("right")) {                 //center move left                  $nextItem.attr("class","trans left showing");                 //right move center                  $item.attr("class","trans current showing");                 //left item clear                  $leftItem.attr("class","trans out-left");                 //previous move right                  $preItem.attr("class","trans right showing");                 //right ready                  $rightItem.attr("class","out-right");             };         });     }); });

$(function(){ var length = $(".container a").length; var $items = $(".container a");

 $items.on("transitionend", function(event){  $items.removeClass("trans"); });

 $(".container a").each(function(index, value){  var $child = $(this);  if (index === 0) {   $child.addClass("current showing");  } else if (index === 1) {   $child.addClass("left showing");  } else if (index == 2) {   $child.addClass("out-left");  } else if (index == (length - 2)) {   $child.addClass("out-right");  } else if (index === (length - 1)) {   $child.addClass("right showing");  } else {   $child.addClass("hiding");  };

  $child.click(function(){   var $item = $(this);   //next item   var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1);   //previous item   var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);   var $rightItem;   if(index == 0){    $rightItem = $items.eq(length - 2);   } else if (index == 1) {    $rightItem = $items.eq(length - 1);   } else {    $rightItem = $items.eq(index - 2);   }   var $leftItem;   if(index == length - 2){    $leftItem = $items.eq(0);   } else if (index == length - 1) {    $leftItem = $items.eq(1);   } else {    $leftItem = $items.eq(index + 2);   }

   //current item click,return   if ($item.hasClass("current")) {    return false;   } else if ($item.hasClass("left")) {    //center move right    $preItem.attr("class","trans right showing");    //left move center    $item.attr("class","trans current showing");    //right item move out    $rightItem.attr("class","trans out-right");    //next move left    $nextItem.attr("class","trans left showing");    //left ready    $leftItem.attr("class","out-left");   } else if ($item.hasClass("right")) {    //center move left    $nextItem.attr("class","trans left showing");    //right move center    $item.attr("class","trans current showing");    //left item clear    $leftItem.attr("class","trans out-left");    //previous move right    $preItem.attr("class","trans right showing");    //right ready    $rightItem.attr("class","out-right");   };  }); });});

html[html]<html> <head>     <title>slideshow</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head> <body>     <div class="container">         <div class="wapper">             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>             <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a>         </div>     </div>          <script type="text/javascript" src="jquery-1.8.3.js"></script>     <script type="text/javascript" src="slide.js"></script> </body> </html>

<html><head> <title>slideshow</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head><body> <div class="container">  <div class="wapper">   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a>  </div> </div>  <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript" src="slide.js"></script></body></html>

css

[css]body,div{margin: 0;padding: 0;} .container{width: 100%;height: 450px; position: relative;} .container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;} .container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;} .container a img{width: 480px;height: 300px;display: block;border: 0;} .container .current{z-index: 2;} .container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;} .container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;} .showing{opacity: 1;visibility: visible;} .hiding{opacity: 0;visibility: hidden;} .out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;} .out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;} .trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

body,div{margin: 0;padding: 0;}.container{width: 100%;height: 450px; position: relative;}.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;}.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;}.container a img{width: 480px;height: 300px;display: block;border: 0;}.container .current{z-index: 2;}.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}.showing{opacity: 1;visibility: visible;}.hiding{opacity: 0;visibility: hidden;}.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;}.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;}.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

demo
demo

