Как сделать этот поворот слайдера

Question

Я хочу сделать слайдер как на этом сайте... вот сайт

Я пытался много раз, и я, наконец, получаю коды и аналогичные формы... это записано в codepen введите ссылку здесь и внизу

но я не мог сделать форму отзывчивым
Я бы хотел, чтобы этот слайдер был адаптивным.

Я начинающий разработчик веб-интерфейса, поэтому я не могу использовать навыки холста, как этот сайт...

я могу использовать только HTML и CSS с небольшим количеством JavaScript и JQuery... и, возможно, я могу получить какие-либо плагины и ссылки? сделать для этого слайда сайта спасибо за чтение

$(function() {
    var $sliderWidth = $('#main_banner .slider .wrap').outerWidth();
    var $sliderHeight = $('#main_banner .slider .wrap').outerHeight();
    $sliderHeight = $sliderWidth;
    $("#main_banner .slider .wrap").css('height', $sliderHeight + "px");
    var rotation = 45;
    // Rotate it 45 degrees to start webkit only due to laziness
    $('.wrap').css('-webkit-transform', 'rotate(' + rotation + 'deg)');

    // Handle the forward and backward rotation
    $('#next').click(function() {
      rotation += 90;
      $('.wrap').css(
        '-webkit-transform', 'rotate(' + rotation + 'deg)'
      );
    });
    $('#prev').click(function() {
      rotation -= 90;
      $('.wrap').css(
        '-webkit-transform', 'rotate(' + rotation + 'deg)'
      );
    });
  })

#main_banner {
  #prev,
  #next {
    display: block;
    position: absolute;
    top: 50%;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 999;
    color: rgba(255, 255, 255, 0.6);
    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }
  #next {
    right: 0;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  #prev {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    left: 0;
  }
  .slider {
    $width: 100%;
    width: $width;
    height: 1100px;
    overflow: hidden;
    position: relative;
    .wrap {
      $width: 300%;
      $height: $width;
      width: $width;
      height: $height;
      overflow: hidden;
      margin: -30% -100%;
      @include transition(all, .3s, ease-in-out);
      .box {
        width: 50%;
        height: 50%;
        float: left;
        position: relative;
        -webkit-backface-visibility: hidden;
        .inner_box {
          @include p-absolute(0, 0, 0, 0);
        }
        &.one {
          .inner_box {
            background: #73C8A9;
            -moz-transform-origin: right bottom;
            -ms-transform-origin: right bottom;
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
          }
        }
        &.two {
          .inner_box {
            @include background(#ff802c, url(/template/default/img/top/main_ban1x2.png), no-repeat, 25% 75%, 30%);
            -moz-transform-origin: left bottom;
            -ms-transform-origin: left bottom;
            -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
            background-blend-mode: multiply;
          }
        }
        &.three {
          .inner_box {
            background: #E1B866;
            -moz-transform-origin: right top;
            -ms-transform-origin: right top;
            -webkit-transform-origin: right top;
            transform-origin: right top;
          }
        }
        &.four {
          .inner_box {
            background: #373B44;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -webkit-transform-origin: left top;
            transform-origin: left top;
          }
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_banner">
  <div class="slider">
    <nav>
      <a href="#" id="prev"></a>
      <a href="#" id="next"></a>
    </nav>
    <div class="wrap">
      <div class="box one">
        <div class="inner_box"></div>
      </div>
      <div class="box two">
        <div class="inner_box"></div>
      </div>
      <div class="box three">
        <div class="inner_box"></div>
      </div>
      <div class="box four">
        <div class="inner_box"></div>
      </div>
    </div>
  </div>
</div>

Пожалуйста, помогите мне ~