Эластичный слайдер при помощи CSS + JS

<div class="elostichnaya_slayder">
  <div class="perevoda_slayda" ><img src="http://zornet.ru/_fr/79/s3843185.jpg" /><p>Снимок слайда</p></div>
  <div class="perevoda_slayda"><img src="http://zornet.ru/_fr/79/s1482027.jpg" /><p>Кадр из фильма</p></div>
  <div class="perevoda_slayda"><img src="http://zornet.ru/_fr/79/s8047997.jpg" /><p>Анимация стиля</p></div>
  <div class="perevoda_slayda" ><img src="http://zornet.ru/_fr/79/s3728710.jpg" /><p>Картинка слайда #1</p></div>
  </div>

@-webkit-keyframes animation{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}

@-webkit-keyframes animation2{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}

.elostichnaya_slayder div p{color:#1c1c1c;position:absolute;bottom:-65px; font-family:font; font-size:22px;
}

.elostichnaya_slayder{
-webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;
margin:60px auto 0 auto;
  height:360px;
  width:240px;
  padding:40px;
  top:100px;
  perspective:1000px;
  transition:ease-in-out .2s;
}

.perevoda_slayda img { text-align:center;width:100%; height:100%; -webkit-user-drag:none;user-drag:none;-moz-user-drag:none; border-radius:2px; }

.perevoda_slayda {
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  position: absolute;
  height: 295px;
  width: 252px;
  box-shadow: 0px 10px 30px 0px rgba(43, 43, 43, 0.35);
  background: #f9f0f0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  text-align: center;
  border: 12px #f7f3f3 solid;
  box-sizing: border-box;
  border-bottom: 55px #ffffff solid;
  border-radius: 3px;
}
.transition {
  -webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
  -moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
  transition: cubic-bezier(0,1.95,.49,.73) .4s ;
}

window.addEventListener('load', onWndLoad, false);

function onWndLoad() {
   
  var slider = document.querySelector('.elostichnaya_slayder');
  var sliders = slider.children;
  var initX = null;  
  var transX = 0;
  var rotZ = 0;
  var transY = 0;
   
  var curSlide = null;
   
  var Z_DIS = 50;
  var Y_DIS = 10;
  var TRANS_DUR = 0.4;
   
  var images=document.querySelectorAll('img');
  for(var i=0;i<images.length;i++)
  {
  images[i].onmousemove=function(e){
  e.preventDefault()
   
  }
  images[i].ondragstart=function(e){
  return false;
   
  }
  }
   
  function init() {
   
  var z = 0, y = 0;

  for (var i = sliders.length-1; i >=0; i--) {
  sliders[i].style.transform = 'translateZ(' + z + 'px) translateY(' + y + 'px)';
   
  z -= Z_DIS;
  y += Y_DIS;
  }

  attachEvents(sliders[sliders.length - 1]);

   
   
  }
  function attachEvents(elem) {
  curSlide = elem;

  curSlide.addEventListener('mousedown', slideMouseDown, false);
  curSlide.addEventListener('touchstart', slideMouseDown, false);
  }
  init();
  function slideMouseDown(e) {
   
  if (e.touches) {
  initX = e.touches[0].clientX;
  }
  else {
  initX = e.pageX;
  }
   
   
  document.addEventListener('mousemove', slideMouseMove, false);
  document.addEventListener('touchmove', slideMouseMove, false);

  document.addEventListener('mouseup', slideMouseUp, false);
  document.addEventListener('touchend', slideMouseUp, false);
  }
  var prevSlide = null;
   
  function slideMouseMove(e) {
  var mouseX;
   
  if (e.touches) {
  mouseX = e.touches[0].clientX;
  }
  else {
  mouseX = e.pageX;
  }

  transX += mouseX - initX;
  rotZ = transX / 20;

  transY = -Math.abs(transX / 15);
   
  curSlide.style.transition = 'none';
  curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  curSlide.style.transform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  var j = 1;
  //remains elements
  for (var i = sliders.length -2; i >= 0; i--) {

  sliders[i].style.webkitTransform = 'translateX(' + transX/(2*j) + 'px)' + ' rotateZ(' + rotZ/(2*j) + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)'+ ' translateZ(' + (-Z_DIS*j) + 'px)';
  sliders[i].style.transform = 'translateX(' + transX/(2*j) + 'px)' + ' rotateZ(' + rotZ/(2*j) + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)'+ ' translateZ(' + (-Z_DIS*j) + 'px)';
  sliders[i].style.transition = 'none';
  j++;
  }  
   
   
  initX =mouseX;
  e.preventDefault();
  if (Math.abs(transX) >= curSlide.offsetWidth-30) {
   
  document.removeEventListener('mousemove', slideMouseMove, false);
  document.removeEventListener('touchmove', slideMouseMove, false);
  curSlide.style.transition = 'ease 0.2s';
  curSlide.style.opacity = 0;
  prevSlide = curSlide;
  attachEvents(sliders[sliders.length - 2]);
  slideMouseUp();
  setTimeout(function () {
  slider.insertBefore(prevSlide, slider.firstChild);
   
  prevSlide.style.transition = 'none';
  prevSlide.style.opacity = '1';
  slideMouseUp();
   
  },201);
   
   
   
  return;
  }
  }
  function slideMouseUp() {
  transX = 0;
  rotZ = 0;
  transY = 0;
   
  curSlide.style.transition = 'cubic-bezier(0,1.95,.49,.73) '+TRANS_DUR+'s';

  curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  curSlide.style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  //remains elements
  var j = 1;
  for (var i = sliders.length - 2; i >= 0; i--) {
  sliders[i].style.transition = 'cubic-bezier(0,1.95,.49,.73) ' + TRANS_DUR / (j + 0.9) + 's';
  sliders[i].style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)' + ' translateZ(' + (-Z_DIS*j) + 'px)';
  sliders[i].style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)' + ' translateZ(' + (-Z_DIS*j) + 'px)';

  j++;
  }
  document.removeEventListener('mousemove', slideMouseMove, false);
  document.removeEventListener('touchmove', slideMouseMove, false);
   
  }

}