Почему моя вращающаяся флип -карта ломается, когда я наношу пути клипсов? ⇐ CSS

[Anonymous]

Я создал здесь переворачивающуюся карту с родительским контейнером, который предоставляет тень коробки: https://codepen.io/andresexton/pen/wbvxorp?editors=0100 твоя/> Мне нужно применить пути клипа, где показаны в коде (спрятаны комментариями), но когда я делаю, обратная сторона карты не показывают, когда его скользят. Есть идеи, почему?








This is the back of the card






< /code>
scss: < /p>
.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%;
}
}
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... clip-paths