Swap Flip

                    <section class="flex items-center justify-center p-8 gap-12">
  <!-- 带翻转效果的表情符号交换 -->
  <label class="swap swap-flip text-9xl">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <div class="swap-on">😈</div>
    <div class="swap-off">😇</div>
  </label>
  
  <!-- 带翻转效果的另一组表情符号 -->
  <label class="swap swap-flip text-7xl">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <div class="swap-on">🌙</div>
    <div class="swap-off">☀️</div>
  </label>
  
  <!-- 带翻转效果的文本卡片 -->
  <label class="swap swap-flip">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <div class="swap-on p-4 bg-blue-500 text-white rounded-lg shadow-lg">
      <div class="text-xl font-bold">后面</div>
    </div>
    <div class="swap-off p-4 bg-green-500 text-white rounded-lg shadow-lg">
      <div class="text-xl font-bold">前面</div>
    </div>
  </label>
</section>

<style>
  .swap {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    user-select: none;
  }
  
  .swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .swap input {
    appearance: none;
    position: absolute;
    opacity: 0;
  }
  
  .swap .swap-on,
  .swap .swap-off {
    display: grid;
    place-items: center;
  }
  
  .swap .swap-on {
    opacity: 0;
  }
  
  .swap input:checked ~ .swap-on {
    opacity: 1;
  }
  
  .swap input:checked ~ .swap-off {
    opacity: 0;
  }
  
  /* 翻转效果 */
  .swap-flip .swap-on,
  .swap-flip .swap-off {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 600px;
    transform: rotateX(0deg);
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .swap-flip .swap-on {
    opacity: 1;
    transform: rotateX(180deg);
  }
  
  .swap-flip input:checked ~ .swap-on {
    transform: rotateX(0deg);
  }
  
  .swap-flip input:checked ~ .swap-off {
    transform: rotateX(-180deg);
  }
</style>