Swap Rotate

                    <section class="flex items-center justify-center p-8 gap-8">
  <!-- 带旋转效果的汉堡图标交换 -->
  <label class="swap swap-rotate">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <!-- 汉堡图标 -->
    <svg
      class="swap-off fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 512 512">
      <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
    </svg>

    <!-- 关闭图标 -->
    <svg
      class="swap-on fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 512 512">
      <polygon
        points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
    </svg>
  </label>
  
  <!-- 带旋转效果的按钮样式图标交换 -->
  <label class="btn btn-circle swap swap-rotate">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <!-- 播放图标 -->
    <svg 
      class="swap-off fill-current" 
      xmlns="http://www.w3.org/2000/svg" 
      width="24" 
      height="24" 
      viewBox="0 0 24 24">
      <path d="M8 5v14l11-7z" />
    </svg>

    <!-- 暂停图标 -->
    <svg 
      class="swap-on fill-current" 
      xmlns="http://www.w3.org/2000/svg" 
      width="24" 
      height="24" 
      viewBox="0 0 24 24">
      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
    </svg>
  </label>
  
  <!-- 带旋转效果的音量图标交换 -->
  <label class="swap swap-rotate text-gray-700">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <!-- 音量开启图标 -->
    <svg
      class="swap-on fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="36"
      height="36"
      viewBox="0 0 24 24">
      <path
        d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
    </svg>

    <!-- 音量关闭图标 -->
    <svg
      class="swap-off fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="36"
      height="36"
      viewBox="0 0 24 24">
      <path
        d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z" />
    </svg>
  </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-rotate .swap-on,
  .swap-rotate .swap-off {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(0deg);
  }
  
  .swap-rotate .swap-on {
    transform: rotateY(180deg);
  }
  
  .swap-rotate input:checked ~ .swap-on {
    transform: rotateY(0deg);
  }
  
  .swap-rotate input:checked ~ .swap-off {
    transform: rotateY(-180deg);
  }
  
  /* 按钮样式 */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease;
  }
  
  .btn-circle {
    border-radius: 9999px;
    width: 40px;
    height: 40px;
  }
</style>