Why does adding opacity break 3D CSS animations? - html

Question

This is my base animation. Everything here works fine unless 1 line of code is added to the div, div::before, div::after { } selector.
*, * ::before, * ::after {
transform-style: preserve-3d;
margin: 0; padding: 0;
box-sizing: border-box;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
html { overflow: hidden; background-color: #eee; }
html, body, main {
height: 100%;
color: #999;
font-family: Arial;
text-align: center;
text-transform: uppercase;
}
main, div, div::before, div::after {
display: flex;
justify-content: center;
align-items: center;
}
body {
perspective: 20rem;
}
div, div::before, div::after {
position: absolute;
transform-origin: center center -5rem;
width: 10rem; height: 10rem;
border-style: solid;
border-color: #ccc;
border-width: 1rem;
background-color: rgb( 221, 221, 221, 0.75 );
}
<style>
div::before {
transform: rotateX( 90deg ); content: 'top';
}
div::after {
transform: rotateX( -90deg ); content: 'bottom';
}
div > div {
transform: rotateY( 180deg );
transform-origin: center center center;
}
div > div::before {
transform: rotateY( 90deg ); content: 'right';
}
div > div::after {
transform: rotateY( -90deg ); content: 'left';
}
.rotate_y { animation-name: rotate_y; }
#keyframes rotate_y {
0% { transform: rotateY( 0deg ); } 100% { transform: rotateY( 360deg ); }
}
.rotate_x { animation-name: rotate_x; animation-duration: 200s; }
#keyframes rotate_x {
0% { transform: rotateX( 0deg ) scale( 1 ); }
100% { transform: rotateX( 360deg ) scale( -6 ); }
}
</style>
<main class='rotate_x'>
<div class='rotate_y'>
front <div>back</div>
</div>
</main>
When the following code is added all of the selected elements proceed to disappear except for the non-pseudo elements.
div, div::before, div::after {
opacity: 0.9;
}
Below is a demonstration with a comment in the CSS following the new line of code added:
*, * ::before, * ::after {
transform-style: preserve-3d;
margin: 0; padding: 0;
box-sizing: border-box;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
html { overflow: hidden; background-color: #eee; }
html, body, main {
height: 100%;
color: #999;
font-family: Arial;
text-align: center;
text-transform: uppercase;
}
main, div, div::before, div::after {
display: flex;
justify-content: center;
align-items: center;
}
body {
perspective: 20rem;
}
div, div::before, div::after {
position: absolute; transform-origin: center center -5rem;
width: 10rem; height: 10rem;
border-style: solid;
border-color: #ccc;
border-width: 1rem;
background-color: rgb( 221, 221, 221, 0.75 );
opacity: 0.9; /* this is the only line that has changed from the first snippet */
}
<style>
div::before {
transform: rotateX( 90deg ); content: 'top';
}
div::after {
transform: rotateX( -90deg ); content: 'bottom';
}
div > div {
transform: rotateY( 180deg );
transform-origin: center center center;
}
div > div::before {
transform: rotateY( 90deg ); content: 'right';
}
div > div::after {
transform: rotateY( -90deg ); content: 'left';
}
.rotate_y { animation-name: rotate_y; }
#keyframes rotate_y {
0% { transform: rotateY( 0deg ); } 100% { transform: rotateY( 360deg ); }
}
.rotate_x { animation-name: rotate_x; animation-duration: 200s; }
#keyframes rotate_x {
0% { transform: rotateX( 0deg ) scale( 1 ); }
100% { transform: rotateX( 360deg ) scale( -6 ); }
}
</style>
<main class='rotate_x'>
<div class='rotate_y'>
front <div>back</div>
</div>
</main>
All of the pseudo elements are gone. Also the 'front' and 'back' divs have been flattened. The whole animation breaks.
Why does this behavior occur and is it possible to implement the opacity property on a 3D CSS animation. If so; how?