Setting border-radius in a container whose transform-style: preserve-3d does not work-CodePudding

I was reading a blog post as to CSS-3D. Somewhere it mentions the issue of setting the property transform-style: preserve-3d is not working as expected. He did not explain the reason, he just tried the other way to get around the issue. Could you explain why we can not set the property in question in the container?

https://codepen.io/thebabydino/pen/ZppXbb/

The blog link I was reading:

https://css-tricks.com/things-watch-working-css-3d/

CodePudding user response：

Set the border-radius to face and it should work just fine.

OR see the codepen

$dim: 40vmin;

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    perspective: 20em;
}

div {
    position: absolute;
    width: $dim; height: $dim;
}

.face {
    border-radius: 50%;
}

.card {
    top: 50%; left: 50%;
    margin: -.5*$dim;
    border-radius: 50%;
    transform-style: preserve-3d;
    text-align: center;
    font: calc(1em   10vmin)/#{$dim} 
        trebuchet ms, verdana, arial, sans-serif;
    // shorthand doesn't work in Firefox :(
    // bug 1304014
    font-size: calc(1em   10vmin);
    line-height: $dim;
    font-family: trebuchet ms, verdana, arial, sans-serif;
    animation: rot 4s ease-in-out infinite;
}

@keyframes rot {
    50% { transform: rotateY(.5turn); }
    100% { transform: rotateY(1turn); }
}

.face {
    backface-visibility: hidden;
    background: #ee8c25;
    
    &:last-child {
        transform: rotateY(.5turn);
        background: #d14730;
    }
}

<div class='card'>
    <div class='face'>front</div>
    <div class='face'>back</div>
</div>