Как создать 3D флип-анимацию карт/блоков с помощью CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      color: #666;
      font-weight: normal;
      margin: 0;
      padding: 0;
      background: #eeeeee;
      }
      h2 {
      background: #666;
      color: #fff;
      text-align: center;
      margin: 0 0 5% 0;
      padding: 0.5em;
      }
      .cardBox {
      float: left;
      font-size: 1.2em;
      margin: 1% 0 0 1%;
      perspective: 800px;
      transition: all 0.4s ease 0s;
      width: 20%;
      }
      .cardBox:hover .card {
      transform: rotateY(180deg);
      }
      .card {
      background: #666666;
      cursor: pointer;
      height: 250px;
      transform-style: preserve-3d;
      transition: transform 0.5s ease 0s;
      width: 100%;
      }
      .card p {
      margin-bottom: 1.8em;
      }
      .card .front,
      .card .back {
      backface-visibility: hidden;
      box-sizing: border-box;
      color: white;
      display: block;
      font-size: 1.2em;
      height: 100%;
      padding: 0.8em 0.7em;
      position: absolute;
      text-align: center;
      width: 100%;
      }
      .card .front strong {
      background: #fff;
      border-radius: 100%;
      color: #222;
      font-size: 1.5em;
      line-height: 30px;
      padding: 0 7px 4px 6px;
      }
      .card .back {
      transform: rotateY( 180deg);
      }
      .card .back a {
      padding: 0.3em 0.5em;
      background: #333;
      color: #fff;
      text-decoration: none;
      border-radius: 1px;
      font-size: 0.9em;
      transition: all 0.2s ease 0s;
      }
      .card .back a:hover {
      background: #fff;
      color: #333;
      text-shadow: 0 0 1px #333;
      }
      .cardBox:nth-child(1) .card .back {
      background: #ffcc00;
      }
      .cardBox:nth-child(2) .card .back {
      background: #1c87c9;
      }
      .cardBox:nth-child(3) .card .back {
      background: #ff6347;
      }
      .cardBox:nth-child(4) .card .back {
      background: #8ebf42;
      }
      .cardBox:nth-child(2) .card {
      -webkit-animation: giro 1.5s 1;
      animation: giro 1.5s 1;
      }
      .cardBox:nth-child(3) .card {
      -webkit-animation: giro 2s 1;
      animation: giro 2s 1;
      }
      .cardBox:nth-child(4) .card {
      -webkit-animation: giro 2.5s 1;
      animation: giro 2.5s 1;
      }
      @-webkit-keyframes giro {
      from {
      transform: rotateY(180deg);
      }
      to {
      transform: rotateY(0deg);
      }
      }
      @keyframes giro {
      from {
      transform: rotateY(180deg);
      }
      to {
      transform: rotateY(0deg);
      }
      }
      @media screen and (max-width: 767px) {
      .cardBox {
      margin-left: 2.8%;
      margin-top: 3%;
      width: 46%;
      }
      .card {
      height: 285px;
      }
      .cardBox:last-child {
      margin-bottom: 3%;
      }
      }
      @media screen and (max-width: 480px) {
      .cardBox {
      width: 94.5%;
      }
      .card {
      height: 260px;
      }
      }
    </style>
  </head>
  <body>
    <h2>Адаптивные флип-карты</h2>
    <div class="boxesContainer">
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Первая карта</h3>
            <p>Наведите курсор мыши</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Первая обратная сторона</h3>
            <p>Контент первой карты</p>
            <a href="#">Кнопка 1</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Вторая карта</h3>
            <p>Наведите курсор мыши</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Вторая обратная сторона</h3>
            <p>Контент второй карты</p>
            <a href="#">Кнопка 2</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Третья карта</h3>
            <p>Наведите курсор мыши</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Третья обратная сторона</h3>
            <p>Контент третьей карты</p>
            <a href="#">Кнопка 3</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Четвертая карта</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Четвертая обратная сторона</h3>
            <p>Контент четвертой карты</p>
            <a href="#">Кнопка 4</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>