How to Create 3D Flipping Animation on a Box/Card with CSS

A lot of funny things can be done with CSS animations. One impressive CSS effect is the flip effect when there's content on both the front and the back sides of a given container. This article will show you how to create:

Horizontal and Vertical Flipping Animation

To have a flipping effect, some properties are essential to set. Let's discuss them below:

  • Use the perspective property to apply a perspective transform to the element and its content (perspective: 1000).
  • Set the transition property to "transform 0.2s". You can define your preferred duration for the transition.
  • To define that the children of the elements will be positioned in 3D effect, use the transform-style property set to "preserve-3d".
  • On :hover set the transform property. Use "rotateY(180deg)" for horizontal flipping effect, and "rotateX(180deg)" for vertical.
  • Set the backface-visibility to "hidden" so that the back of the flipped elements won't be displayed during the animation.

Example of creating a horizontal flipping effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>3D Flip Box (Horizontal)</h2>
    <p>Hover over the box to see the effect:</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>

Result

Hover over the box to see the effect:

Front Side

Back Side

Example of creating a vertical flipping effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>3D Flip Box (Vertical)</h2>
    <p>Hover over the box to see the effect:</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>
It is also possible to flip around other axes. Use transform: rotateZ to achieve the effect.

Book Flipping Animation

See another example with a book flipping effect. Here the transform-origin is set to 0 to have the book flip effect.

Example of creating a book flipping animation:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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">
            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>

Flipping Cards with Buttons

See another example where cards have buttons when flipped. It’s easy to set your preferred links because the <a> tag is used.

Example of creating flipping cards with buttons:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>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>

Flipping Lists

It is also possible to add flipping effects to your lists (<li> elements) and have an amazing design for your lists.

Here, see an example of flipping hexagon lists, which also has a “Read more” button on the backside.

Example of creating flipping hexagon lists:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>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>

Flipping Menus

In the following example, find how a flipping menu is created.

Example of creating flipping menus:

<!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="Menu Image">
          </figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/1" alt="Menu Image">
            <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="Menu Image">
        <!-- 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="Menu Image">
          </figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/2" alt="Menu Image">
            <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="Menu Image">
        <!-- 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="Menu Image">
          </figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/3" alt="Menu Image">
            <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="Menu Image">
          </figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/4" alt="Menu Image">
            <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="Menu Image">
        <!-- 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="Menu Image">
          </figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/5" alt="Menu Image">
            <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="Menu Image">
        <!-- 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="Menu Image">
          </figure>
          <figure class="back">
            <img src="http://lorempixel.com/g/500/500/food/6" alt="Menu Image">
            <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>
Do you find this helpful?

Related articles