如何使用 CSS 在盒子/卡片上创建 3D 翻转动画-之路教程

翻书动画

请参阅另一个具有翻书效果的示例。
此处将 transform-oroirn 设置为 0 以具有翻书效果。

创建翻书动画的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .floatL {
        float: left;
      }
      .floatR {
        float: right;
      }
      .clear {
        clear: both;
        line-height: 0;
        font-size: 0;
        display: block;
      }
      p {
        line-height: 10px;
        color: #333;
        margin: 5px 0;
      }
      #content {
        padding: 10px;
        background: #eeeeee;
        width: 400px;
      }
      .flip-container {
        perspective: 1000;
        width: 200px;
      }
      .flipper {
        transition: 0.8s;
        transform-style: preserve-3d;
        position: relative;
        height: 100px;
      }
      .front,
      .back {
        width: 200px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
        color: #ffffff;
        font-weight: bold;
        font-size: 22px;
        line-height: 100px;
        text-align: center;
      }
      .back {
        transform: rotateY(180deg);
        background: #8ebf42;
      }
      .front {
        z-index: 2;
        background: #1c87c9;
      }
      .flip-container:hover .flipper,
      .flip-container.hover .flipper {
        transform: rotateY(-180deg);
      }
      .flip-container p {
        margin: 10px 0;
        text-align: center;
      }
      .bookflip-container .flipper {
        transform-oroirn: 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>

用按钮翻转卡片

请参阅另一个示例，其中卡片在翻转时具有按钮。
因为使用了 <a> 标签，所以很容易设置首选链接。

使用按钮创建翻转卡片的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        color: #666;
        font-weight: normal;
        margin: 0;
        padding: 0;
        background: #eeeeee;
      }
      h2 {
        background: #666;
        color: #fff;
        text-align: center;
        margin: 0 0 5% 0;
        padding: 0.5em;
      }
      .cardBox {
        float: left;
        font-size: 1.2em;
        margin: 1% 0 0 1%;
        perspective: 800px;
        transition: all 0.4s ease 0s;
        width: 20%;
      }
      .cardBox:hover .card {
        transform: rotateY(180deg);
      }
      .card {
        background: #666666;
        cursor: pointer;
        height: 250px;
        transform-style: preserve-3d;
        transition: transform 0.5s ease 0s;
        width: 100%;
      }
      .card p {
        margin-bottom: 1.8em;
      }
      .card .front,
      .card .back {
        backface-visibility: hidden;
        box-sizing: border-box;
        color: white;
        display: block;
        font-size: 1.2em;
        height: 100%;
        padding: 0.8em 0.7em;
        position: absolute;
        text-align: center;
        width: 100%;
      }
      .card .front strong {
        background: #fff;
        border-radius: 100%;
        color: #222;
        font-size: 1.5em;
        line-height: 30px;
        padding: 0 7px 4px 6px;
      }
      .card .back {
        transform: rotateY( 180deg);
      }
      .card .back a {
        padding: 0.3em 0.5em;
        background: #333;
        color: #fff;
        text-decoration: none;
        border-radius: 1px;
        font-size: 0.9em;
        transition: all 0.2s ease 0s;
      }
      .card .back a:hover {
        background: #fff;
        color: #333;
        text-shadow: 0 0 1px #333;
      }
      .cardBox:nth-child(1) .card .back {
        background: #ffcc00;
      }
      .cardBox:nth-child(2) .card .back {
        background: #1c87c9;
      }
      .cardBox:nth-child(3) .card .back {
        background: #ff6347;
      }
      .cardBox:nth-child(4) .card .back {
        background: #8ebf42;
      }
      .cardBox:nth-child(2) .card {
        -webkit-animation: giro 1.5s 1;
        animation: giro 1.5s 1;
      }
      .cardBox:nth-child(3) .card {
        -webkit-animation: giro 2s 1;
        animation: giro 2s 1;
      }
      .cardBox:nth-child(4) .card {
        -webkit-animation: giro 2.5s 1;
        animation: giro 2.5s 1;
      }
      @-webkit-keyframes giro {
        from {
          transform: rotateY(180deg);
        }
        to {
          transform: rotateY(0deg);
        }
      }
      @keyframes giro {
        from {
          transform: rotateY(180deg);
        }
        to {
          transform: rotateY(0deg);
        }
      }
      @media screen and (max-width: 767px) {
        .cardBox {
          margin-left: 2.8%;
          margin-top: 3%;
          width: 46%;
        }
        .card {
          height: 285px;
        }
        .cardBox:last-child {
          margin-bottom: 3%;
        }
      }
      @media screen and (max-width: 480px) {
        .cardBox {
          width: 94.5%;
        }
        .card {
          height: 260px;
        }
      }
    </style>
  </head>
  <body>
    <h2>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>
            &#x21bb;
          </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>
            &#x21bb;
          </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>
            &#x21bb;
          </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>
            &#x21bb;
          </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>

如何使用 CSS 在盒子/卡片上创建 3D 翻转动画

CSS动画可以做很多有趣的事情。

当给定容器的正面和背面都有内容时，一种令人印象深刻的 CSS 效果是翻转效果。
本文将向我们展示如何创建：

水平和垂直翻转动画
翻书动画
用按钮翻转卡片
翻转列表
翻转菜单

翻转列表

还可以为列表（<li> 元素）添加翻转效果，并为列表提供令人惊叹的设计。

其中请参阅翻转六边形列表的示例，它的背面也有一个“阅读更多”按钮。

创建翻转六边形列表的示例：

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

水平和垂直翻转动画

要产生翻转效果，必须设置一些属性。
让我们在下面讨论它们：

使用透视属性将透视变换应用于元素及其内容（透视：1000）。
将 transition 属性设置为“transform 0.2s”。

我们可以定义首选的过渡持续时间。

要定义元素的子元素将在 3D 效果中定位，请使用设置为“preserve-3d”的 transform-style 属性。
在 :hover 上设置转换属性。

水平翻转效果使用“rotateY(180deg)”，垂直翻转效果使用“rotateX(180deg)”。

将背面可见性设置为“隐藏”，以便在动画过程中不会显示翻转元素的背面。

创建水平翻转效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .box {
        background-color: transparent;
        width: 220px;
        height: 300px;
        border: 1px solid #eeeeee;
        perspective: 1000px;
      }
      .box-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.5s;
        transform-style: preserve-3d;
      }
      .box:hover .box-inner {
        transform: rotateY(180deg);
      }
      .box-front,
      .box-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }
      .box-front {
        background-color: #cccccc;
        color: #111111;
      }
      .box-back {
        background-color: #8ebf42;
        color: #eeeeee;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <h2>3D 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>

创建垂直翻转效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .box {
        background-color: transparent;
        width: 220px;
        height: 300px;
        border: 1px solid #eeeeee;
        perspective: 1000px;
      }
      .box-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.4s;
        transform-style: preserve-3d;
      }
      .box:hover .box-inner {
        transform: rotateX(180deg);
      }
      .box-front,
      .box-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }
      .box-front {
        background-color: #cccccc;
        color: #111111;
      }
      .box-back {
        background-color: #8ebf42;
        color: #eeeeee;
        transform: rotateX(180deg);
      }
    </style>
  </head>
  <body>
    <h2>3D 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>

也可以围绕其他轴翻转。
使用transform:rotateZ来达到效果。

翻转菜单

在以下示例中，了解如何创建翻转菜单。

创建翻转菜单的示例：

<!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="food.png" 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="food2.png" alt="Menu Image">
          </figure>
          <figure class="back">
            <img src="food3.png" alt="Menu Image">
            <div class="flip-item-desc">
              <h4 class=“flip item title”>西红柿</h4>
			 <p>西红柿炒蛋</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="food.png" 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="food2.png" alt="Menu Image">
          </figure>
          <figure class="back">
            <img src="food3.png" alt="Menu Image">
            <div class="flip-item-desc">
              <h4 class=“flip item title”>西红柿</h4>
			 <p>西红柿炒蛋</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="food.png" 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="food2.png" alt="Menu Image">
          </figure>
          <figure class="back">
            <img src="food3.png" alt="Menu Image">
            <div class="flip-item-desc">
              <h4 class=“flip item title”>黄瓜</h4>
			 <p>凉拌黄瓜</p>
            </div>
          </figure>
        </label>
      </section>
      <section class="flip-item-wrap">
        <img class="fake-image" src="food.png" 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="food2.png" alt="Menu Image">
          </figure>
          <figure class="back">
            <img src="food3.png" alt="Menu Image">
            <div class="flip-item-desc">
              <h4 class=“flip item title”>西红柿</h4>
			 <p>西红柿炒蛋</p>
            </div>
          </figure>
        </label>
      </section>
      
    </div>
  </body>
</html>

日期：2020-06-02 22:15:01 来源：oir作者：oir

←如何使用 CSS 将图像转换为灰度图像

如何使用 CSS3 动画创建闪烁效果→