CSS Transform 3D slideshow effects

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 Showin G ");         } else if (index = = 2) {             $child. addclass ("Out-left"),         } else if (index = = (length-2)) {             $child. addclass ("ou T-right ");         } else if (index = = = (length-1)) {             $child. addclass ("right showing");         } else {             $child. addclass ("hiding"); c19/>};

 $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", "tr                 Ans 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 le                 FT 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-r Ight ");  } else if (index = = = (length-1)) {   $child. addclass ("right showing");  } else {   $child. addclass ("hiding"); c14/>};

 $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]
 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

