css3 - jQuery 3d slide switch transition -

i want create simple content slider, moves elementes different layers, take @ fiddle:

http://jsfiddle.net/ujmdjl00/3/

$(document).ready(function() {            var offset = 0;      var opacity = 1;      var zindex = $("#slider li").length;            var nextbtn = $("#next");      var prevbtn = $("#prev");            $("#slider li").each(function() {          $(this).css({              top: -offset,              bottom: offset,              left: offset,              right: offset,              opacity: opacity,              zindex: zindex          });                    offset = offset + 10;          opacity = opacity - 0.2;          zindex = zindex - 1;      });            nextbtn.click(function() {            });            prevbtn.click(function() {            });        });

#slider {      width: 400px;      margin: 100px auto 0 auto;      position: relative;      padding: 0;      list-style: none;  }    #slider li {      background: #000;      height: 300px;      line-height: 300px;      color: #fff;      position: absolute;      text-align: center;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="prev">prev</button>  <button id="next">next</button>    <ul id="slider">      <li>slide #1</li>      <li>slide #2</li>      <li>slide #3</li>      <li>slide #4</li>  </ul>

if "next" button clicked, first slide should scale , fade out, second should shown (every slide have move, first append @ end).

my question(s):

how create such loop? whats best way - clone first slide or move?

should use transform: scale(); or manipulate width/height?

also im not sure how realize animation - helpful hints/links?

thanks!

i have made work circular carousal. hope should give direction if not wanted.

http://jsfiddle.net/ujmdjl00/12/

$(document).ready(function() {      var offset = 0         , index=0         , totalcount = $("#slider li").length     ;     var opacity = 1;     var zindex = $("#slider li").length;      var nextbtn = $("#next");     var prevbtn = $("#prev");      $("#slider li").each(function() {         $(this).css({             top: -offset,             bottom: offset,             left: offset,             right: offset,             opacity: opacity,             zindex: zindex         });         $(this).attr("data-num", zindex - 1);         offset = offset + 10;         opacity = opacity - 0.2;         zindex = zindex - 1;     });      nextbtn.click(function() {         var activeitem = $("#slider li.active")             , index = parseint(activeitem.attr("data-num"));          updateslidertiles(activeitem, index, true);      });      prevbtn.click(function() {         var activeitem = $("#slider li.active")             , index = parseint(activeitem.attr("data-num"));          updateslidertiles(activeitem, index, false);     });      function updateslidertiles(item, index, goingforward){          var nextactiveitemindex=0, datanum = 0;         if(goingforward){             offset = 30;             opacity = 0.4;             zindex = 1;             datanum = 0;             nextactiveitemindex = 2;         }         else{             offset = 0;             opacity = 1;             zindex = 4;             datanum = 3;             nextactiveitemindex = 0;         }          var noffset = null             , nopacity = null             , nzindex = null             , ndatanum = null         ;          $("#slider li").removeclass("active");          $("#slider li").each(function() {              var num = parseint($(this).attr("data-num"));             if(nextactiveitemindex == num){                 $(this).addclass("active");             }             if((goingforward && num==index) || (!goingforward && num==nextactiveitemindex)){                 $(this).css({                     top: -offset,                     bottom: offset,                     left: offset,                     right: offset,                     opacity: opacity,                     zindex: zindex                 });                  $(this).attr("data-num", datanum);             }             else{                 if(goingforward){                     num = num+1;                     noffset = parseint($(this).css("bottom"))-10;                     nopacity = parsefloat($(this).css("opacity"))+0.2;                     nzindex = parseint($(this).css("zindex"))+1;                 }                 else{                     num = num-1;                     noffset = parseint($(this).css("bottom"))+10;                     nopacity = parsefloat($(this).css("opacity"))-0.2;                     nzindex = parseint($(this).css("zindex"))-1;                 }                  $(this).css({                         top: -noffset,                         bottom: noffset,                         left: noffset,                         right: noffset,                         opacity: nopacity,                         zindex: nzindex                 });                  $(this).attr("data-num", num);             }            });       }  });