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

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      margin: 0;
      font: 14px Helvetica, Arial, serif;
      }
      .title {
      text-align: center;
      color: #333;
      font-size: 1.6em;
      }
      .flip-menu {
      margin: 30px 0 0;
      }
      .flip-item-wrap {
      width: 25%;
      height: auto;
      float: left;
      position: relative;
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      -ms-perspective: 800px;
      -o-perspective: 800px;
      perspective: 800px;
      }
      @media screen and (min-width: 1280px) {
      .flip-item-wrap {
      width: 16.6%;
      }
      }
      @media screen and (max-width: 979px) {
      .flip-item-wrap {
      width: 33.3%;
      }
      }
      @media screen and (max-width: 639px) {
      .flip-item-wrap {
      width: 50%;
      }
      }
      @media screen and (max-width: 379px) {
      .flip-item-wrap {
      width: 100%;
      }
      }
      .flip-item-wrap img {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      }
      .flip-item-wrap input {
      display: none;
      }
      .flip-item-wrap .fake-image {
      visibility: hidden;
      }
      .flip-item {
      display: block;
      width: 100%;
      height: 100%;
      float: left;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      color: #fff;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
      -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
      transition: transform 1s;
      }
      .flip-item figure {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
      }
      .flip-item .back {
      width: 100%;
      display: block;
      margin: 0;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
      }
      .flipper:checked + .flip-item {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
      }
      .flip-item-desc {
      background: rgba(0, 0, 0, 0.2);
      width: 90%;
      height: 90%;
      padding: 5%;
      position: absolute;
      top: 0;
      left: 0;
      text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9);
      overflow: hidden;
      }
      .flip-item-title {
      font-size: 1.5em;
      margin: 1em 0 0.8em;
      }
    </style>
  </head>
  <body>
    <h1 class="title">Флип-меню. Интерактивное/Адаптивное/Только CSS</h1>
    <div class="flip-menu">
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
        <input type="checkbox" class="flipper" id="a">
        <label for="a" class="flip-item">
          <figure class="front"><img src="http://lorempixel.com/500/500/food/1" alt=""></img></figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
            <div class="flip-item-desc">
              <h4 class="flip-item-title">Lorem ipsum dolor</h4>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
        <input type="checkbox" class="flipper" id="b">
        <label for="b" class="flip-item">
          <figure class="front"><img src="http://lorempixel.com/500/500/food/2" alt=""></img></figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/2" alt=""></img>
            <div class="flip-item-desc">
              <h4 class="flip-item-title">Lorem ipsum dolor</h4>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
        <input type="checkbox" class="flipper" id="c">
        <label for="c" class="flip-item">
          <figure class="front"><img src="http://lorempixel.com/500/500/food/3" alt=""></img></figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/3" alt=""></img>
            <div class="flip-item-desc">
              <h4 class="flip-item-title">Lorem ipsum dolor</h4>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
        <input type="checkbox" class="flipper" id="d">
        <label for="d" class="flip-item">
          <figure class="front"><img src="http://lorempixel.com/500/500/food/4" alt=""></img></figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/4" alt=""></img>
            <div class="flip-item-desc">
              <h4 class="flip-item-title">Lorem ipsum dolor</h4>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
        <input type="checkbox" class="flipper" id="e">
        <label for="e" class="flip-item">
          <figure class="front"><img src="http://lorempixel.com/500/500/food/5" alt=""></img></figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/5" alt=""></img>
            <div class="flip-item-desc">
              <h4 class="flip-item-title">Lorem ipsum dolor</h4>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt="">
        <input type="checkbox" class="flipper" id="f">
        <label for="f" class="flip-item">
          <figure class="front"><img src="http://lorempixel.com/500/500/food/6" alt=""></img></figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/6" alt=""></img>
            <div class="flip-item-desc">
              <h4 class="flip-item-title">Lorem ipsum dolor</h4>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
    </div>
  </body>
</html>