-Webkit-Transform-Style: Preserve-3D Not Working

Why doesn't transform-style: preserve-3d work?

'Preserve-3d' would make an impact on your example if you were to have elements that are overlapping.
Because none of your squares are actually sitting on top of each other, but rather are split-apart - you don't see any difference.

Check this article on CSS-Tricks It has a very self-explanatory example in the very beginning, images included so you will see and understand the difference.

Transform-Style preserve-3d in internet explorer CSS not working

It Aleksander Bavdaz, provides the answer and the fix here:

Unfortunately IE already uses the non-prefixed properties, so you either can't use transform-3d at all or have to define the prefixed properties last.

CSS3 3D Transform doesn't work on IE11

transform-style: preserve3d not working in Firefox and IE

Add px's

-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;

3D Transform z-index broken with firefox, preserve-3d not preserved

Unfortunately, z-ordering is not working fine with cycled layers. It is a known problem that Firefox doesn't handle at all currently. That's an old Firefox bug and you can't fix it until they fix the bug in the browser.

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

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>

---

Related Topics