CSS:
<style>
.rolodexSection {
    padding: 4em 0;
}
.rolodexSection h2 {
    margin-bottom: 3em;
}
.rolodex-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.rolodex-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.rolodex-container {
    width: 100%;
    position: relative;
    perspective: 1200px;
    overflow: visible;
    transition: height 0.4s ease;
}
.card {
    position: absolute;
    background: #fff;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px -2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.6s ease, top 0.6s ease, z-index 0.3s ease, opacity 0.6s ease;
}
.card.hidden {
    transform: rotateY(90deg);
    z-index: 0;
    opacity: 0;
}
.card.visible {
    transform: rotateY(0deg);
    top: 0px;
    z-index: 3;
    opacity: 1;
}
.card.peek {
    transform: rotateY(0deg);
    top: -20px;
    z-index: 2;
    opacity: 0.9;
}
.card.behind {
    top: -40px;
    z-index: 1;
    opacity: 0.6;
}
.card-container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}
.card-item {
    width: 50%;
}
.card-item .img-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.card-content {
    padding: 15px 20px;
}
.card p {
    font-size: 14px;
    font-weight: normal;
}
.controls {
    margin-top: 20px;
    text-align: center;
}
.controls button {
    padding: 5px;
    margin: 0 10px;
    width: 45px;
    height: 45px;
    font-size: 16px;
    border: 2px solid var(--cta-background-color);
    border-radius: 50px;
    background-color: transparent;
    color: var(--cta-background-color);
    cursor: pointer;
}
.controls button:hover {
    border: 2px solid var(--cta-hover-color);
    color: var(--cta-hover-color);
}

@media (max-width: 767px) {
.card-item {
    width: 100%;
}
.card-container {
    padding: 0 20px 20px;
}
}
</style>

HTML:
<div class="rolodexSection">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>Rolodex Cards</h2>
        <div class="rolodex-contents">
          <div class="rolodex-wrapper">
            <div class="rolodex-container" id="rolodex">
              <div class="card" id="card1">
                <div class="card-container">
                  <div class="card-item">
                    <div class="card-content">
                      <div class="card-number">01</div>
                      <h3>Card One Title</h3>
                      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quae cupiditate nesciunt, qui maxime dolorem voluptate impedit laudantium soluta libero asperiores ab quis!</p>
                    </div>
                  </div>
                  <div class="card-item">
                    <div role="img" aria-label="#NAME# in #CITY# #STATE#" title="#NAME# in #CITY# #STATE#" style="background-image: url('https://placehold.co/800x500/EEE/158761'); padding: 34% 0; border-radius: 15px;" class="img-background img-cover"></div>
                  </div>
                </div>
              </div>
              <div class="card" id="card2">
                <div class="card-container">
                  <div class="card-item">
                    <div class="card-content">
                      <div class="card-number">02</div>
                      <h3>Card Two Title</h3>
                      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quae cupiditate nesciunt, qui maxime dolorem voluptate impedit laudantium soluta libero asperiores ab quis!</p>
                    </div>
                  </div>
                  <div class="card-item" id="card-img2">
                    <div role="img" aria-label="#NAME# in #CITY# #STATE#" title="#NAME# in #CITY# #STATE#" style="background-image: url('https://placehold.co/800x500/EEE/337ab7'); padding: 34% 0; border-radius: 15px;" class="img-background img-cover"></div>
                  </div>
                </div>
              </div>
              <div class="card" id="card3">
                <div class="card-container">
                  <div class="card-item">
                    <div class="card-content">
                      <div class="card-number">03</div>
                      <h3>Card Three Title</h3>
                      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quae cupiditate nesciunt, qui maxime dolorem voluptate impedit laudantium soluta libero asperiores ab quis!</p>
                    </div>
                  </div>
                  <div class="card-item" id="card-img3">
                    <div role="img" aria-label="#NAME# in #CITY# #STATE#" title="#NAME# in #CITY# #STATE#" style="background-image: url('https://placehold.co/800x500/EEE/4416da'); padding: 34% 0; border-radius: 15px;" class="img-background img-cover"></div>
                  </div>
                </div>
              </div>
              <div class="card" id="card4">
                <div class="card-container">
                  <div class="card-item">
                    <div class="card-content">
                      <div class="card-number">04</div>
                      <h3>Card Four Title</h3>
                      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quae cupiditate nesciunt, qui maxime dolorem voluptate impedit laudantium soluta libero asperiores ab quis!</p>
                    </div>
                  </div>
                  <div class="card-item" id="card-img4">
                    <div role="img" aria-label="#NAME# in #CITY# #STATE#" title="#NAME# in #CITY# #STATE#" style="background-image: url('https://placehold.co/800x500/EEE/02c408'); padding: 34% 0; border-radius: 15px;" class="img-background img-cover"></div>
                  </div>
                </div>
              </div>
              <div class="card" id="card5">
                <div class="card-container">
                  <div class="card-item">
                    <div class="card-content">
                      <div class="card-number">05</div>
                      <h3>Card Four Title</h3>
                      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quae cupiditate nesciunt, qui maxime dolorem voluptate impedit laudantium soluta libero asperiores ab quis!</p>
                    </div>
                  </div>
                  <div class="card-item" id="card-img5">
                    <div role="img" aria-label="#NAME# in #CITY# #STATE#" title="#NAME# in #CITY# #STATE#" style="background-image: url('https://placehold.co/800x500/EEE/ffb200'); padding: 34% 0; border-radius: 15px;" class="img-background img-cover"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="controls">
              <button onclick="prevCard()"><i class="fa fa-arrow-down" aria-hidden="true"></i></button>
              <button onclick="nextCard()"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS:
<script>
  const cards = document.querySelectorAll('.card');
  const container = document.getElementById('rolodex');
  let currentIndex = 0;

  function updateCards() {
    cards.forEach((card, index) => {
      card.className = 'card'; // Reset classes
      if (index === currentIndex) card.classList.add('visible');
      else if (index === (currentIndex + 1) % cards.length) card.classList.add('peek');
      else if (index === (currentIndex + 2) % cards.length) card.classList.add('behind');
      else card.classList.add('hidden');
    });

    const visibleCard = document.querySelector('.card.visible');
    if (visibleCard) {
      container.style.height = visibleCard.offsetHeight + 'px';
    }
  }

  function nextCard() {
    currentIndex = (currentIndex + 1) % cards.length;
    updateCards();
  }

  function prevCard() {
    currentIndex = (currentIndex - 1 + cards.length) % cards.length;
    updateCards();
  }

  window.addEventListener('load', updateCards);
<script>