Узнайте, как можно получить горизонтальный и вертикальный эффект 3D флип-анимации. Узнайте также, как создать книги, списки, карты и меню с таким эффектом.

С помощью CSS анимаций можно создать много всего интересного. Один из классных эффектов - это CSS флип-эффект, при котором имеется контент и с передней и с обратной стороны контейнера. В этой статье вы узнаете, как можно легко создать такой эффект.

Горизонтальная и вертикальная флип-анимация
Флип-анимация книг
Флип-карты с кнопками
Флип-списки
Флип-меню

Горизонтальная и вертикальная флип-анимация

Чтобы получить такой эффект, есть несколько свойств, которые обязательно должны быть установлены. Давайте посмотрим их:

Используйте свойство perspective, чтобы применить трансформацию perspective к элементу и его контенту (perspective: 1000).
Установите свойство transition в transition: transition: transform 0.2s. Можете сами определить продолжительность перехода.
Для того,чтобы указать, что дочерние элементы должны быть позиционированы в 3D эффекте, используйте свойство transform-style, установленное в transform-style: preserve-3d.
Установите свойство transform для :hover. Используйте transform: transform: rotateY(180deg) для горизонтального флип-эффекта, а transform: rotateX(180deg) для вертикального.
Используйте backface-visibility с целью скрыть обратную сторону повернутого элемента таким образом, чтобы она не отображалась во время анимации (backface-visibility: hidden).

Рассмотрим пример горизонтального флип-эффекта:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .box {
      background-color: transparent;
      width: 220px;
      height: 300px;
      border: 1px solid #eeeeee;
      perspective: 1000px;
      }
      .box-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.5s;
      transform-style: preserve-3d;
      }
      .box:hover .box-inner {
      transform: rotateY(180deg);
      }
      .box-front, .box-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      }
      .box-front {
      background-color: #cccccc;
      color: #111111;
      }
      .box-back {
      background-color: #8ebf42;
      color: #eeeeee;
      transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <h2>3D Флип-блок (Горизонтальная анимация)</h2>
    <p>Наведите курсор мыши на блок и увидите эффект:</p>
    <div class="box">
      <div class="box-inner">
        <div class="box-front">
          <h2>Front Side</h2>
        </div>
        <div class="box-back">
          <h2>Back Side</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Попробуйте сами!

А сейчас рассмотрим другой пример вертикального флип-эффекта:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .box {
      background-color: transparent;
      width: 220px;
      height: 300px;
      border: 1px solid #eeeeee;
      perspective: 1000px;
      }
      .box-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.4s;
      transform-style: preserve-3d;
      }
      .box:hover .box-inner {
      transform: rotateX(180deg);
      }
      .box-front, .box-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      }
      .box-front {
      background-color: #cccccc;
      color: #111111;
      }
      .box-back {
      background-color: #8ebf42;
      color: #eeeeee;
      transform: rotateX(180deg);
      }
    </style>
  </head>
  <body>
    <h2>3D флип-блок (Вертикальная анимация)</h2>
    <p>Наведите курсор мыши на блок и увидите эффект:</p>
    <div class="box">
      <div class="box-inner">
        <div class="box-front">
          <h2>Передняя сторона</h2>
        </div>
        <div class="box-back">
          <h2>Обратная сторона</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Попробуйте сами!

Также возможно запустить анимацию относительно других осей. Для такого эффекта используйте transform: rotateZ.

Флип-анимация книг

Рассмотрим пример с эффектом флип-анимаций для книг. Здесь свойство transform-origin установлено в 0.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .floatL { 
      float: left; 
      }
      .floatR { 
      float: right;
      }
      .clear { 
      clear: both;
      line-height: 0; 
      font-size: 0; 
      display: block; 
      }
      p { 
      line-height: 10px; 
      color: #333; 
      margin: 5px 0; 
      }
      #content { 
      padding: 10px; 
      background: #eeeeee; 
      width: 400px;
      }
      .flip-container { 
      perspective:1000; 
      width: 200px; 
      }
      .flipper { 
      transition: 0.8s; 
      transform-style: preserve-3d; 
      position: relative; 
      height: 100px; 
      }
      .front, .back { 
      width: 200px; 
      height: 100px; 
      position: absolute; 
      left: 0; 
      top: 0; 
      backface-visibility: hidden; 
      color: #ffffff; 
      font-weight: bold;
      font-size: 22px;
      line-height: 100px; 
      text-align: center; 
      }
      .back { 
      transform: rotateY(180deg); 
      background: #8ebf42; 
      }
      .front { 
      z-index: 2; 
      background: #1c87c9; 
      }
      .flip-container:hover .flipper, .flip-container.hover .flipper { 
      transform: rotateY(-180deg); 
      }
      .flip-container p { 
      margin: 10px 0; 
      text-align: center; 
      }
      .bookflip-container .flipper { 
      transform-origin: 0; 
      } 
    </style>
  </head>
  <body>
    <h2>3D флип-блок (флип-книга)</h2>
    <p>Наведите курсор мыши на блок и увидите эффект:</p>
    <div id="content">
      <div class="flip-container floatL" ontouchstart="this.classList.toggle('hover');"> 
      </div>
      <div class="flip-container bookflip-container floatR" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
          <div class="front">
            Передняя сторона
          </div>
          <div class="back">
            Обратная сторона
          </div>
          <div class="clear"></div>
        </div>
        <p>Флип-книга</p>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

Попробуйте сами!

Флип-карты с кнопками

Пример, где карты становятся кнопками при наведении курсора мыши. Установление необходимой вам ссылки довольно легко, так как используется тег <a>.

Пример

<!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>

Попробуйте сами!

Флип-списки

Также возможно добавить флип-эффекты к спискам (элементы <li>) и получить интересный дизайн.

Пример флип-списка в виде шестигранника, который с обратной стороны имеет еще кнопку “Узнайте больше”.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <title>Заголовок документа</title>
    <style>
      #hexagons{
      max-width: 893px;
      margin: 1em auto 16em;
      font: normal 16px/20px Helvetica, Arial, sans-serif;
      padding-top: 4em;
      position: relative;
      }
      #categories{
      overflow:hidden;
      width: 100%;
      }
      .clr:after{
      content:"";
      display:block;
      clear:both;
      }
      #categories li{
      position:relative;
      list-style-type:none;
      width:32.33333333%; /* = (100- 3) / 3 */
      padding-bottom: 37.33641263%; /* =  width /0.866 */
      float:left;
      overflow:hidden;
      visibility:hidden;
      margin-left:0.5%;
      margin-right:0.5%;
      -webkit-transform: rotate(-60deg) skewY(30deg);
      -ms-transform: rotate(-60deg) skewY(30deg);
      transform: rotate(-60deg) skewY(30deg);
      cursor:pointer;
      }
      @media (min-width: 768px){
      #categories li:nth-child(5n+4){
      margin-left: 1%;
      }
      #categories li:nth-child(5n+4),
      #categories li:nth-child(5n+5){
      margin-top: -8.083333333%;  /* = w / 4 */
      margin-bottom: -8.083333333%; /* = w / 4 */
      -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
      -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
      transform: translateX(50%) rotate(-60deg) skewY(30deg);
      }
      #categories li:nth-child(5n+6){
      clear: left;		
      transform: translateX(0) rotate(-60deg) skewY(30deg);
      }
      #categories li:nth-child(5n+4):last-child,
      #categories li:nth-child(5n+5):last-child{
      margin-bottom: 0%;
      }
      }
      @media( max-width: 767px){
      #categories li{
      width: 48.75%; /* = (100 -2.5) / 2 */
      padding-bottom: 56.29330254%; /* =  width /0.866 */
      }
      #categories li:nth-child(3n+3){
      margin-left: 25.5%;
      clear: both;
      margin-top: -12.1875%; /* = w / 4 */
      margin-bottom: -12.1875%; /* = w / 4 */
      }
      #categories li:nth-child(3n+2){
      float: right;			  
      }
      #categories li:nth-child(3n+3):last-child{
      margin-bottom: 0%;
      }
      #categories li:nth-child(3n+4){
      clear: left;
      transform: translateX(0) rotate(-60deg) skewY(30deg);
      }
      }
      #categories li *{
      position:absolute;
      visibility:visible;
      overflow: hidden;
      }
      #categories li > div{
      width:100%;
      height:100%;
      text-align:center;
      color:#fff;
      overflow:hidden;
      -webkit-transform: skewY(-30deg) rotate(60deg);
      -ms-transform: skewY(-30deg) rotate(60deg);
      transform: skewY(-30deg) rotate(60deg);
      -webkit-backface-visibility:hidden;
      }
      /* HEX CONTENT */
      #categories li img{
      left: 50%;
      top: 50%;
      width: auto;
      margin: 0 auto;
      transform: translate(-50%,-50%);
      -webkit-border-radius: 20px; 
      -moz-border-radius: 20px; 
      border-radius:20px;
      }
      #categories li .flip-content{
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: #000;
      text-align: center;
      width: 100%;
      padding: 20px 3px;
      }
      #categories li .front .flip-content{
      font-size: 21px;
      }
      #categories li .flip-content *{
      position: static;
      }
      #categories li .flip-content{
      font-size: 19px; 
      line-height: 1.2;
      }
      #categories li .front{
      background-repeat: repeat;
      background-position: center;
      }
      #categories li .flip-content p{
      color: #666666;
      padding-bottom: 10px;
      }
      #categories li .flip-content.lg{
      font-size: 27px;
      }
      #categories li .flip-content.md{
      font-size: 24px;
      }
      #categories li .flip-content.title-xs{
      font-size: 38px;
      }
      #categories li .front .flip-content,
      #categories li .front .flip-content p{
      color: #fff;
      }
      #categories li .flip-content p:last-child{
      padding-bottom: 0;
      }
      #categories li .back .flip-content p a{
      background: #df5d53;
      display: inline-block;
      -webkit-border-radius: 18px; 
      -moz-border-radius: 18px; 
      border-radius: 18px;
      color: #fff;
      text-transform: uppercase;
      padding: 4px 6px 4px 11px;
      font-size: 12px;
      font-weight: 600;
      text-decoration:none;
      }
      #categories li .back  .flip-content p a i{
      font-size: 21px;
      vertical-align: middle;
      padding-left: 3px;
      }
      @media (max-width: 1024px){
      #news-month.style2{
      overflow: hidden;
      }
      #hexagons{
      margin-bottom: 15em;
      }
      }
      @media (max-width: 991px){
      #categories li .front .flip-content.title-xs{
      font-size: 29px;
      }
      #categories li .front .flip-content{
      font-size: 17px;
      }
      #categories li .flip-content.lg{
      font-size: 22px;
      }
      #categories li .flip-content.md{
      font-size: 18px;
      }
      #categories li .flip-content{
      font-size: 16px;
      }
      .initiative.style2 .initiative--title{
      font-size: 19px;
      }
      #hexagons{
      overflow: hidden;
      margin: 1em auto 0;
      padding-top: 3em;
      padding-bottom: 3em;
      }
      #categories{
      width: auto;
      padding: 0 12px;
      }
      #hexagons .el-bg.bg-11{
      top: 996px;
      }
      #hexagons .el-bg.bg-12{
      top: 1152px;
      }
      .page-template-our-impact .header{
      max-height: none;
      }
      }
      @media (max-width: 767px){
      #categories li .front .flip-content.title-xs{
      font-size: 32px;
      }
      #categories li .front .flip-content{
      font-size: 23px;
      }
      #categories li .flip-content.lg{
      font-size: 27px;
      }
      #categories li .flip-content.md{
      font-size: 26px;
      }
      #categories li .flip-content{
      font-size: 23px;
      }
      #hexagons .el-bg.bg-14{
      top: 1751px;
      }
      #categories li img{
      height: 100%;
      }
      .initiative.style2 a{
      padding-bottom: 20px;
      padding-top: 10px;
      }
      #news-month.style2 .news-figure{
      background-position:  0 0;
      padding: 20px 16px 20px;
      }
      .initiative.style2{
      padding-top: 20px;
      padding-bottom: 20px;
      }
      .page-template-our-impact .header{
      background-position: -62px;
      }
      }
      @media (max-width: 560px){
      #categories li .front .flip-content.title-xs{
      font-size: 22px;
      }
      #categories li .front .flip-content{
      font-size: 13px;
      }
      #categories li .flip-content.lg{
      font-size: 17px;
      }
      #categories li .flip-content.md{
      font-size: 16px;
      }
      #categories li .flip-content{
      font-size: 13px;
      }
      #categories{
      padding:0 8px;
      }
      #categories li .back .flip-content p a{
      font-size: 11px;
      padding: 0px 6px 0px 11px;
      }
      #categories li .back .flip-content p a i{
      font-size: 15px;
      line-height: 1.5;
      }
      }
      @media( max-width: 375px){
      .page-template-our-impact .header{
      background-position: -87px;
      }
      }
      @media (max-width: 320px){
      #categories li .front .flip-content.title-xs{
      font-size: 19px;
      }
      #categories li .front .flip-content{
      font-size: 12px;
      }
      #categories li .flip-content.lg{
      font-size: 13px;
      }
      #categories li .flip-content.md{
      font-size: 12px;
      }
      #categories li .flip-content{
      font-size: 11px;
      }
      #categories li .flip-content p{
      padding-bottom: 5px;
      }
      .page-template-our-impact .header{
      background-position: -104px;
      }
      }
      /* Flip EFFECT  */
      .flip-container {
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      -ms-perspective: 1000;
      perspective: 1000;
      -ms-transform: perspective(1000px);
      -moz-transform: perspective(1000px);
      -moz-transform-style: preserve-3d; 
      -ms-transform-style: preserve-3d; 
      }
      /*  UPDATED! flip the pane when hovered */
      .flip-container:hover{
      }
      .flip-container:hover .back {
      transform: rotateY(0deg);
      }
      .flip-container:hover .front {
      transform: rotateY(180deg);
      }
      .flip-container, .front, .back {
      width: 100%;
      height: 100%;
      }
      /* flip speed goes here */
      .flipper {
      width: 100%;
      height: 100%;
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
      -ms-transition: 0.6s;
      -moz-transition: 0.6s;
      -moz-transform: perspective(1000px);
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transition: 0.6s;
      transform-style: preserve-3d;
      position: relative!important;
      }
      /* hide back of pane during swap */
      .front, .back {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateY(0deg);
      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;
      -moz-transform: rotateY(0deg);
      -o-transition: 0.6s;
      -o-transform-style: preserve-3d;
      -o-transform: rotateY(0deg);
      -ms-transition: 0.6s;
      -ms-transform-style: preserve-3d;
      -ms-transform: rotateY(0deg);
      transition: 0.6s;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      position: absolute;
      top: 0;
      left: 0;
      }
      /*  UPDATED! front pane, placed above back */
      .front {
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      z-index: 2;
      }
      /* back, initially hidden pane */
      .back {
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      -o-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
      background: #eeeeee;
      }
    </style>
  </head>
  <body>
    <div id="hexagons">
      <ul id="categories" class="clr">
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #1c87c9;">
              </div>
              <div class="back">
                <div class="flip-content">
                  <p>"Lorem Ipsum это <br/>”текст-рыба”,<br/>часто используемый в <br/>печати и  <br/>вэб-дизайне."</p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #ff6347;">
                <div class="flip-content title-xs">
                  <p>"Что такое <br>Lorem <br>Ipsum?"</p>
                </div>
              </div>
              <div class="back">
                <div class="flip-content">
                  <p>"Lorem Ipsum - это<br/>”текст-рыба”, <br/>часто используемый<br/> в печати и <br/>и вэб-дизайне."</p>
                  <p>
                    <a href="#">Узнайте больше <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #8ebf42;">
              </div>
              <div class="back">
                <div class="flip-content lg">
                  <p>"Lorem Ipsum - это <br/>”текст-рыба”<br/>часто используемый <br/>в печати и <br/>вэб-дизайне."</p>
                  <p>
                    <a href="#">Узнайте больше <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front"  >
                <img src="https://www.w3docs.com//uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg" alt="fruits"/>
              </div>
              <div class="back">
                <div class="flip-content md">
                  <p>"Lorem Ipsum - это <br/>”текст-рыба”, <br/>часто используемый<br/>в печати и  <br/>вэб-дизайне."</p>
                  <p>
                    <a href="#">Узнайте больше<i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
              <div class="front" style="background-color: #ffcc00;">
              </div>
              <div class="back">
                <div class="flip-content lg">
                  <p>"Lorem Ipsum -это <br/>”текст-рыба”, <br/>часто используемый <br/>в печати и  <br/>вэб-дизайне."</p>
                  <p>
                    <a href="#">Узнайте больше<i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
      </ul>
    </div>
  </body>
</html>

Попробуйте сами!

Флип-меню

В следующем примере увидите, как создается флип-меню:

Пример

<!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=""><!-- this image will add height to parent element -->
        <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=""><!-- this image will add height to parent element -->
        <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=""><!-- this image will add height to parent element -->
        <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=""><!-- this image will add height to parent element -->
        <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=""><!-- this image will add height to parent element -->
        <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=""><!-- this image will add height to parent element -->
        <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>

Попробуйте сами!