Home > Article > Web Front-end > css transform 3D slide effect
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