<!-- Rotating card -->

<div class="card-wrapper col-4 mt-4 mx-auto">

​

  <div id="card-1" class="card card-rotating text-center h-100">

​

    <!-- Front Side -->

    <div class="face front">

    <!-- Image-->

    <div class="card-up">

    <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg" alt="Image with a photo of clouds.">

    </div>

​

    <!-- Avatar -->

    <div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle"

      alt="Sample avatar image.">

    </div>

​

      <!-- Content -->

      <div class="card-body h-100" style="background-color: white;">

​

      <h4 class="font-weight-bold mb-3">Marie Johnson</h4>

      <p class="font-weight-bold blue-text">Web developer</p>

      <!-- Triggering button -->

      <a class="rotate-btn" data-card="card-1"><i class="fas fa-redo-alt"></i> Click here to rotate</a>

      </div>

    </div>

    <!-- Front Side -->

​

    <!-- Back Side -->

    <div class="face back">

      <div class="card-body h-100" style="background-color: white;">

​

        <!-- Content -->

        <h4 class="font-weight-bold mb-0">About me</h4>

        <hr>

        <p>

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel

          eius veniam maxime?

          <hr>

          <!-- Social Icons -->

          <ul class="list-inline py-2">

            <li class="list-inline-item"><a class="p-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a></li>

            <li class="list-inline-item"><a class="p-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a></li>

            <li class="list-inline-item"><a class="p-2 fa-lg gplus-ic"><i class="fab fa-google-plus-g"></i></a></li>

            <li class="list-inline-item"><a class="p-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a></li>

          </ul>

          <!-- Triggering button -->

          <a class="rotate-btn" data-card="card-1"><i class="fas fa-undo"></i> Click here to rotate back</a>

​

      </div>

    </div>

    <!-- Back Side -->

​

  </div>

</div>

<!-- Rotating card -->          

​