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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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;
        display: flex;
        flex-wrap: wrap;
        gap:10px;
      }
      .flip-item-wrap {
        width: 25%;
        height: auto;
        overflow: hidden;
        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: 32%;
        }
      }
      @media screen and (max-width: 639px) {
        .flip-item-wrap {
          width: 48%;
        }
      }
      @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: 0.5em 0 0;
      }
    </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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Fruits">
        <!-- 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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu item one front side">
          </figure>
          <figure class="back">
            <img src="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu item one back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu Item second 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="https://www.w3docs.com/uploads/media/default/0001/05/18dfcef6d88dc2802e6eb659eb08c96a04b3a5fd.jpg" alt="Menu item second front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/18dfcef6d88dc2802e6eb659eb08c96a04b3a5fd.jpg" alt="Menu item second back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu Item third 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="https://www.w3docs.com/uploads/media/default/0001/05/97f03397c49144e3157d532c42187ed720f4c155.jpg" alt="Menu item third  front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/97f03397c49144e3157d532c42187ed720f4c155.jpg" alt="Menu item third  back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt="Menu Item fourth image ">
        <!-- 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="https://w3docs.com/uploads/media/default/0001/05/6efd432225863b7fb44cfe2c38e93e6485e4a239.jpg" alt="Menu Item fourth front side">
          </figure>
          <figure class="back">
            <img src="https://w3docs.com/uploads/media/default/0001/05/6efd432225863b7fb44cfe2c38e93e6485e4a239.jpg" alt="Menu Item fourth back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt=" Menu Item fifth 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="https://www.w3docs.com/uploads/media/default/0001/05/b94edc838cbdd00508e5aa1d1209717d2f0526ec.jpg" alt="Menu Item fifth front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/b94edc838cbdd00508e5aa1d1209717d2f0526ec.jpg" alt="Menu Item fifth back  side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <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="https://w3docs.com/uploads/media/default/0001/05/634c63fa3c4736ba84f019d2ac88dda49ea435cf.jpg" alt=" Menu Item sixth 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="https://www.w3docs.com/uploads/media/default/0001/05/1e319abea7d517608b9d4418665d10d8a4b2e29e.jpg" alt="Menu Item sixth front side">
          </figure>
          <figure class="back">
            <img src="https://www.w3docs.com/uploads/media/default/0001/05/1e319abea7d517608b9d4418665d10d8a4b2e29e.jpg" alt="Menu Item sixth back side">
            <div class="flip-item-desc">
              <h2 class="flip-item-title">Lorem ipsum dolor</h2>
              <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
            </div>
          </figure>
        </label>
      </section>
    </div>
  </body>
</html>

Try it Yourself »

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

Horizontal and Vertical Flipping Animation

Example of creating a horizontal flipping effect:

Result

Front Side

Back Side

Example of creating a vertical flipping effect:

Book Flipping Animation

Example of creating a book flipping animation:

Flipping Cards with Buttons

Example of creating flipping cards with buttons:

Flipping Lists

Example of creating flipping hexagon lists:

Flipping Menus

Example of creating flipping menus:

Related Resources