css - Why is my rotating flip card breaking when I apply clip paths? - Stack Overflow

admin管理员组

文章数量:1355542

I created a flipping card here with a parent container that provides a box shadow:

I need to apply clip paths where shown in the code (hidden with comments), but when I do, the back of the card doesn't show when flipped. Any ideas why?

Thanks in advance from a noob!

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=".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%;
          }
        }
      }
    }
  }
}

本文标签： cssWhy is my rotating flip card breaking when I apply clip pathsStack Overflow