添加clip-path后旋转翻转卡片失效，原因是什么？

我制作了一个带父容器阴影的3D翻转卡片，尝试给代码中注释标注的.stage-card-container或.stage-card-item添加clip-path实现不规则形状，但添加后卡片翻转时背面完全无法显示。请问这是什么原因？

HTML代码： #

<div class="stage-card">
  <label>
    <input type="checkbox" />
    <div class="stage-card-outline">
      <div class="stage-card-container">
        <div class="stage-card-item">
          <div class="stage-card-front">
            <img src="https://sc.apexl.io/wp-content/uploads/2025/03/stanley-first-steps-1.png"/>
          </div>
          <div class="stage-card-back">
            This is the back of the card
          </div>
        </div>
      </div>
    </div>
  </label>
</div>

SCSS代码： #

.stage-card {
  margin: 1rem;
  
  label {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    display: block;
    width: fit-content;
    position: relative;
    cursor: pointer;
    
    input {
      display: none;
    }
    
    &:has(input:checked) .stage-card-outline {
      filter: drop-shadow(4px 4px 0px #000);
    }
    
    &:has(input:checked) .stage-card-container {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
    }
  
    .stage-card-outline {
      filter: drop-shadow(-4px 4px 0px #000);
      transition: ease .3s;
      width: 90%;
      margin-bottom: 2rem;

      .stage-card-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 2px;
        width: 300px;
        aspect-ratio: 1 / 1;
        background: black;
        box-sizing: border-box;
        transition: ease .3s;
        /* When I apply this styling, it breaks!
        clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
        -webkit-clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
        */
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: transform 0.6s ease;

        .stage-card-item {
          display: flex;
          position: absolute;
          inset: 2px;
          justify-content: center;
          align-items: center;
          /* When I apply this styling, it breaks!
          clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
          -webkit-clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
          */
          background: white;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          
          .stage-card-front, .stage-card-back {
            position: absolute;
            text-align: center;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            flex-direction: column;
          }
          
          .stage-card-front {
            object-fit: contain;
            padding: 1rem;

            img {
              width: 100%;
            }
          }
          
          .stage-card-back {
            background: #222;
            color: white;
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            text-align: left;
            padding: 2rem;
            justify-content: flex-start;
            height: 100%;
          }
        }
      }
    }
  }
}

原因分析 #

问题出在**clip-path与transform-style: preserve-3d的兼容性冲突**：
当给设置了transform-style: preserve-3d的元素添加clip-path时，浏览器会强制将该元素的3D变换上下文切换为2D扁平化模式，直接覆盖preserve-3d的效果。这会导致子元素的3D变换失效，卡片背面的.stage-card-back虽然存在，但无法在被破坏的3D空间中正常渲染显示。

解决方法 #

方法1：将clip-path应用到内层的前后卡片元素

把clip-path移到.stage-card-front和.stage-card-back上，这样不会影响父容器的3D变换上下文：

.stage-card-front, .stage-card-back {
  position: absolute;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  // 添加clip-path到这里
  clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
  -webkit-clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
  width: 100%;
  height: 100%;
}

方法2：用伪元素模拟外层不规则边框

如果需要给外层容器添加不规则形状的边框，可以通过父元素的伪元素来绘制，避免直接修改.stage-card-container的样式：

.stage-card-container {
  // 保留原有的preserve-3d等样式
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: black;
    clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
    -webkit-clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%);
    pointer-events: none; // 不干扰点击交互
  }
}

两种方法都能保留卡片的3D翻转功能，同时实现不规则形状的效果，背面内容也能正常显示。

内容的提问来源于stack exchange，提问作者Andre Sexton