Comment Créer une Animation de Retournement 3D sur une Boîte/carte AvecCSS

Il est possible de faire plusieurs choses amusantes avec les animations CSS. L'un des effets CSS impressionants est l'effet de retournement quand il y a un contenu à la fois sur les côtés avant et arrière du conteneur donné. Cet article vous montrera la façon de créer cet effet facilement.

Animation de Retournement Horizontal et Vertical
Animation de Retournement pour un Livre
Cartes de Retournement avec des Boutons
Listes de Retournement
Menus de Retournement

Animation de Retournement Horizontal et Vertical

Pour avoir un effet de retournement, quelques propriétés sont doivent essentiellement être définies. Discutons les ci dessous:

Utilisez la propriété perspective pour appliquer une transformation perspective à l'élément et à son contenu (perspective: 1000).
Définissez la propriété transition à transition: transform 0.2s. Vous pouvez définir la duration que vous préférez pour la transition.
Pour définir que les enfants des éléments seront positionnés dans un effet 3D, utilisez la propriété transform-style définie à transform-style: preserve-3d.
Sur :hover définissez la propriété transform. Utilisez transform: rotateY(180deg) pour l'effet de retournement horizontal, et transform: rotateX(180deg) pour ceux vertical.
Masquez la backface-visibility pour que l'arrière des éléments de retournement ne soit pas affiché pendant l'animation (backface-visibility: hidden).

Ici, voyez un exemple d'un effet de retournement horizontal.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Boîte de retournement 3D (Horizontale)</h2>
    <p>Placez la souris sur la boîte pour voir l'effet:</p>
    <div class="box">
      <div class="box-inner">
        <div class="box-front">
          <h2>Face frontale</h2>
        </div>
        <div class="box-back">
          <h2>Face arrière</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Maintenant, prenons un autre exemple d'un effet de retournement vertical.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Boîte de retournement 3D (Verticale)</h2>
    <p>Placez la souris sur la boîte pour voir l'effet:</p>
    <div class="box">
      <div class="box-inner">
        <div class="box-front">
          <h2>Face frontale</h2>
        </div>
        <div class="box-back">
          <h2>Face arrière</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Il est aussi possible de retourner autour d'autres axes. Utilisez transform: rotateZ pour obtenir l'effet.

Animation de Retournement pour un Livre

Voyez un autre exemple avec un effet de retournement d'un livre. Ici la propriété transform-origin est définie à 0 pour avoir l'effet de retournement du livre.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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 Flip Box (Book Flip)</h2>
    <p>Hover over the box to see the effect:</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">
            La face frontale
          </div>
          <div class="back">
            La face arrière
          </div>
          <div class="clear"></div>
        </div>
        <p>Retournement de livre</p>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

Essayez-vous-même!

Cartes de Retournement avec des Boutons

Voyez un autre exemple dans lequel les cartes ont les boutons lors qu'elles sont retournées. Il est facile à définir les liens que vous préférez car la balise <a> est utilisée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Cartes de retournement sensibles</h2>
    <div class="boxesContainer">
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Première Carte</h3>
            <p>Placez la souris sur elle pour retourner</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Première face arrière</h3>
            <p>Contenu dans la première carte</p>
            <a href="#">Bouton 1</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Deuxième carte</h3>
            <p>Placez la souris sur elle pour retourner</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Deuxième face arrière</h3>
            <p>Contenu dans la deuxième carte</p>
            <a href="#">Bouton 2</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Troisième carte</h3>
            <p>Placez la souris sur elle pour retourner</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Troisième face arrière</h3>
            <p>Contenu dans la troisième carte</p>
            <a href="#">Bouton 3</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Quatrième carte</h3>
            <p>Placez la souris sur elle pour retourner</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Quatrième face arrière</h3>
            <p>Contenu dans la quatrième carte</p>
            <a href="#">Bouton 4</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Listes de Retournement

Il est également possible d'ajouter des effets de retournement à votre listes (des éléments <li> ) et avoir une super apparence des listes.

Ici, on va voir un exemple des listes hexagones de retournement qui ont aussi un bouton “En lire plus” sur la face arrière.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Titre du document</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;
      }
      /* CONTENU HEX */
      #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;
        }
      }
      /* EFFET de Retournement  */
      .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;
      }
      /*  MISE À JOUR! retourner le volet en survol */
      .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%;
      }
      /* la vitesse de retournement */
      .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;
      }
      /* masquer l'arrière du volet pendant l'échange  */
      .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;
      }
      /*  MISE À JOUR! volet frontal, placé au dessus de l'arrière */
      .front {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        z-index: 2;
      }
      /* arrière, volet initialement masqué */
      .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 est <br />
                    simplemet du faux texte <br />
                    employé dans la composition <br />
                    et la mise en page <br />
                    avant impression."
                  </p>
                  <p>
                    <a href="#">en lire plus <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>
                    "Qu'est-ce que c'est <br />
                    Lorem <br />
                    Ipsum?"
                  </p>
                </div>
              </div>
              <div class="back">
                <div class="flip-content">
                  <p>
                    "Lorem Ipsum est <br />
                    simplemet du faux texte <br />
                    employé dans la composition <br />
                    et la mise en page <br />
                    avant impression."
                  </p>
                  <p>
                    <a href="#">en lire plus <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 est<br />
                    simplemet du faux texte <br />
                    employé dans la composition <br />
                    et la mise en page <br />
                    avant impression."
                  </p>
                  <p>
                    <a href="#">en lire plus <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 est<br />
                    simplement du faux texte <br />
                    employé dans la composition <br />
                    et la mise en page <br />
                    avant impression."
                  </p>
                  <p>
                    <a href="#">en lire plus <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 est<br />
                    simplement du faux texte <br />
                    employé dans la composition <br />
                    et la mise en page <br />
                    avant impression."
                  </p>
                  <p>
                    <a href="#">en lire plus <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

Essayez-vous-même!

Menus de Retournement

Dans l'exemple suivant, trouvez comment un menu de retournement est créé.

Exemple

<!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">Menu de Retournement. CSS Cliquable/Sensible/Pur </h1>
    <div class="flip-menu">
      <section class="flip-item-wrap">
        <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- cet image va ajouter la hauteur de l'élément parent -->
        <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=""><!-- cet image va ajouter la hauteur de l'élément parent -->
        <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=""><!-- cet image va ajouter la hauteur de l'élément parent -->
        <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=""><!-- cet image va ajouter la hauteur de l'élément parent -->
        <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=""><!-- cet image va ajouter la hauteur de l'élément parent -->
        <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=""><!-- cet image va ajouter la hauteur de l'élément parent -->
        <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>

Essayez-vous-même!