最小翻牌demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  6.     <title>Document</title>
  7.     <style>
  8.      /* 简单样式声明，可忽略 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       .card-style {
  15.         margin: 0 auto;
  16.         width: 100px;
  17.         height: 200px;
  18.         border-left: 3px solid salmon;
  19.         border-bottom: 3px solid salmon;
  20.         border-top: 3px solid yellow;
  21.         border-right: 3px solid yellow;
  22.         color: #fff;
  23.       }
  24.             /* 简单样式声明结束 */
  26.       .card {
  27.         position: relative;
  28.         transition: transform 0.5s linear;
  29.         transform-style: preserve-3d;
  30.       }
  32.       .transform {
  33.         transform: rotateY(180deg);
  34.       }
  36.       .front {
  37.         position: absolute;
  38.         top: 0;
  39.         right: 0;
  40.         bottom: 0;
  41.         left: 0;
  42.         background: #888;
  43.         backface-visibility: hidden;
  44.       }
  46.       .end {
  47.         position: absolute;
  48.         top: 0;
  49.         right: 0;
  50.         bottom: 0;
  51.         left: 0;
  52.         background: seagreen;
  53.         transform: rotateY(-180deg);
  54.         backface-visibility: hidden;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="card card-style">
  60.       card
  61.       <div class="front"></div>
  62.       <div class="end"></div>
  63.     </div>
  64.     <script>
  65.       // 最小化demo
  66.       // 一张牌，翻牌+移动
  67.       const card = document.querySelector('.card')
  68.       card.addEventListener('click', function() {
  69.         if (card.className.match('transform')) {
  70.           card.classList.remove('transform')
  71.         } else {
  72.           card.classList.add('transform')
  73.         }
  74.       })
  75.     </script>
  76.   </body>
  77. </html>

点击查看【codepen】

原理分析

  • 主要翻转效果实现：
    • 点击时给父元素添加 transform: rotateY(180deg);
    • 父元素设置初始值 transform-style: preserve-3d; 设置元素的子元素是位于3d空间中，所以上面的元素会遮盖下面的元素。transform-style(MDN)
    • 背面的元素设置初始值 transform: rotate(-180deg);
    • 父元素设置 transition
    • 当父元素进行180度的翻转时，背面元素被置于正面位置，因为元素处于3d空间内，所以会遮盖掉当前翻转到背面的正面元素，从而形成翻牌效果。
  • 让翻转效果更自然：
    • backface-visibility: hidden; 设置当元素背向观察者时不可见。并且切换可见性的时机为 rotate(90deg) 的时候。backface-visibility(MDN)
    • 如果仅用主要翻转效果实现，那么切换翻牌卡面的时机会是翻转结束时，也就是 rotate(180deg) 并且 transition 完成时，变化滞后，体验不好。
    • 配合 backface-visibility ，切换时机会变为 rotate(90deg) 时