反转CSS动画

Question

我想自定义翻转动画CSS。 作为滑动图像，我想做同样的事情，但要使用如下翻转动画：

$(document).ready(function() {
  nombre_flip = 10;
  $('.arrow.arrow-left').live('click', function() {
    var current = $('.slideshow li').attr('class');
    var prev = parseInt(current) - 1;
    $('.arrow.arrow-right').show();
    if (prev >= 0) {
      $('.slideshow li').attr('class', prev);
      $('.slideshow li').html('<img class="img current animated-object animated flipInY faster" src="https://picsum.photos/id/' + prev + '/200/200">');
      if (prev == 1) {
        $(this).hide();
      }
    }
  });
  $('.arrow.arrow-right').live('click', function() {
    var current = $('.slideshow li').attr('class');
    var next = parseInt(current) + 1;
    $('.arrow.arrow-left').show();
    if (next <= nombre_flip) {
      $('.slideshow li').attr('class', next);
      $('.slideshow li').html('<img class="img current animated-object animated flipInY faster" src="https://picsum.photos/id/' + next + '/200/200">');
      if (next == nombre_flip) {
        $(this).hide();
      }
    }
  });
});

.hide {
  display: none;
}

.arrow-left {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(40% - 20px);
}

.arrow-right {
  position: absolute;
  top: calc(50% - 50px);
  right: calc(40% - 20px);
}

.arrow {
  padding: 20px;
  cursor: pointer;
  z-index: 10000;
  font-size: 50px;
}

.slideshow {
  width: 200px;
  height: 200px;
  z-index: 5000;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  list-style: none;
}

.slideshow ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 300px;
  list-style: none;
}

.slideshow li {
  float: left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
  <a class="arrow arrow-left hide">
    &lt;
  </a>
  <div class="slideshow">
    <ul>
      <li class="1"><img class="img current animated-object animated flipInY faster delay-0-5s" src="https://picsum.photos/id/1/200/200"></li>
    </ul>
  </div>
  <a class="arrow arrow-right">
    &gt;
  </a>
</div>

使用右箭头，动画效果很棒，但换一种方式（左箭头），我想反转动画。我不知道该怎么办 非常感谢您的帮助。