Wie kann man mit CSS eine 3D Flipping Animation auf einer Box/Karte erstellen

Mit CSS-Animationen kann man viele lustige Effekte bekommen. Ein großartiger CSS-Effekt ist der CSS-Flip-Effekt, wenn sich die Inhalte sowohl auf der Vorder- als auch auf der Rückseite eines bestimmten Containers befinden. Dieser Artikel wird Ihnen zeigen, wie Sie diesen Effekt auf einfache Weise erzeugen können.

Horizontale und Verticale Flipping Animation
Book Flipping Animation
Flipping Cards mit Buttons
Flipping Lists
Flipping Menüs

Horizontale und Verticale Flipping Animation

Um den Flipping-Effekt zu bekommen, muss man einige Eigenschaften unbedingt einstellen. Lassen Sie sie unten diskutieren:

Verwenden Sie die Eigenschaft perspective, um eine perspektivische Transformation auf das Element und seinen Inhalt anzuwenden (perspective: 1000).
Stellen Sie die Eigenschaft transition auf transition: transform 0.2s ein. Sie können Ihre bevorzugte Dauer für den Übergang einstellen.
Um festzulegen, dass die untergeordnete Elemente im 3D-Effekt positioniert werden, verwenden Sie die Eigenschaft transform-style mit transform-style: preserve-3d.
Auf :hover stellen Sie die Eigenschaft transform. Verwenden Sie transform: rotateY(180deg) für den horizontalen Flipping-Effekt und transform: rotateX(180deg) für den vertikalen.
Verbergen Sie backface-visibility, so dass die Rückseite der umgedrehten Elemente während der Animation nicht angezeigt wird (backface-visibility: hidden).

Hier sehen Sie ein Beispiel für einen horizontalen Flipping-Effekt.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 Flip Box (Horizontal)</h2>
    <p>Bewegen Sie mit der Maus über das Feld, um den Effekt zu sehen:</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>

Versuch es selber!

Ein weiteres Beispiel für einen vertikalen Flipping-Effekt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 Flip Box (Vertical)</h2>
    <p>Bewegen Sie mit der Maus über das Feld, um den Effekt zu sehen:</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>

Versuch es selber!

Es ist auch möglich, um andere Achsen zu drehen. Verwenden Sie transform: rotateZ, um den Effekt zu erzielen.

Book Flipping Animation

Ein weiteres Beispiel mit einem Buchumschlag-Effekt (book flipping effect). Hier wird transform-origin auf 0 eingestellt, den Buch-Flip-Effekt zu bekommen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Bewegen Sie mit der Maus über das Feld, um den Effekt zu sehen:</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">
            The front face
          </div>
          <div class="back">
            The back face
          </div>
          <div class="clear"></div>
        </div>
        <p>Book Flip</p>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

Versuch es selber!

Flipping Cards mit Buttons

Ein weiteres Beispiel, wo die Karten beim Kippen Buttons haben. Es ist einfach, Ihre bevorzugten Links zu definieren, da das Tag <a> verwendet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Responsive Flip Cards</h2>
    <div class="boxesContainer">
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card One</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side One</h3>
            <p>Content in card one</p>
            <a href="#">Button 1</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card Two</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side Two</h3>
            <p>Content in card two</p>
            <a href="#">Button 2</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card Three</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side Three</h3>
            <p>Content in card three</p>
            <a href="#">Button 3</a>
          </div>
        </div>
      </div>
      <div class="cardBox">
        <div class="card">
          <div class="front">
            <h3>Card Four</h3>
            <p>Hover to flip</p>
            <strong>&#x21bb;</strong>
          </div>
          <div class="back">
            <h3>Back Side Four</h3>
            <p>Content in card four</p>
            <a href="#">Button 4</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Versuch es selber!

Flipping Lists

Es ist auch möglich, Ihren Listen Flipping-Effekte hinzuzufügen (<li> ) und ein erstaunliches Design für Ihre Listen zu haben.

Hier finden Sie ein Beispiel zum Blättern von Hexagon-Listen, die auch einen Button “Mehr erfahren” auf der Rückseite haben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 of the 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;
      }
      /* 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 is <br/>simply dummy text <br/>of the printing <br/>and typesetting  <br/>industry."</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>"What is <br>Lorem <br>Ipsum?"</p>
                </div>
              </div>
              <div class="back">
                <div class="flip-content">
                  <p>"Lorem Ipsum is <br/>simply dummy text <br/>of the printing <br/>and typesetting  <br/>industry."</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: #8ebf42;">
              </div>
              <div class="back">
                <div class="flip-content lg">
                  <p>"Lorem Ipsum is <br/>simply dummy text <br/>of the printing <br/>and typesetting  <br/>industry."</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"  >
                <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 is <br/>simply dummy text <br/>of the printing <br/>and typesetting  <br/>industry."</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: #ffcc00;">
              </div>
              <div class="back">
                <div class="flip-content lg">
                  <p>"Lorem Ipsum is <br/>simply dummy text <br/>of the printing <br/>and typesetting  <br/>industry."</p>
                  <p>
                    <a href="#">read more <i class="fa fa-arrow-circle-right"></i></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
      </ul>
    </div>
  </body>
</html>

Versuch es selber!

Flipping Menüs

<!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">Flip Menu. Clickable/Responsive/Pure 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>

Versuch es selber!

Im folgenden Beispiel finden Sie, wie ein Blättermenü erstellt wird.