Attempting to create a 3D Flip Card in CodePen has presented an issue. When hovering over the card, the content is intended to rotate along the Y axis. However, upon implementation in CodePen, the background of the card front becomes transparent, revealing the back's background instead.
The same code tested in Chrome and Firefox browsers functions correctly without any transparency issues.
Various adjustments have been made including using transform-style: preserve-3d; and backface-visibility: hidden;, but the problem persists.
Could this be a bug exclusive to CodePen, since it works fine on regular browsers?
My code:
:root {
box-sizing: border-box;
font-family: sans-serif;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card {
width: 300px;
height: 400px;
transform-style: preserve-3d;
}
.card__content {
height: 100%;
transform-style: preserve-3d;
transition: transform 3s ease;
position: relative;
}
.card:hover .card__content {
transform: rotateY(180deg);
}
.card__front, .card__back {
text-align: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 5em;
transform-style: preserve-3d;
backface-visibility: hidden;
border: 1px solid black;
}
.card__front {
background: red;
}
.card__heading {
transform: translateZ(2rem);
}
.card__desc {
transform: translateZ(3rem);
}
.card__back {
transform: rotateY(180deg);
background: blue;
}
.card__body {
max-width: 60%;
transform: translateZ(4rem);
}<div class="card">
<div class="card__content">
<div class="card__front">
<p class="card__desc">
This would be some text
</p>
<h1 class="card__heading">
Your Heading
</h1>
</div>
<div class="card__back">
<p class="card__body">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>Link to the CodePen: https://codepen.io/xutocode/pen/KKaNQqY?editors=1100 In the linked example, observe how the red background of the card's front transitions to blue before rotation. Is this a known bug within CodePen?