`backface-visibility`不继承

Question

请解释为什么backface-visibility容器内的所有嵌套元素都不能继承属性.card-face，以及如何解决此问题（link）

document.getElementById('main-request')
.addEventListener('click', e => {
            
    e.preventDefault();
    document.querySelector('.flip-card').classList.toggle('is-flipped');
});

html {
    height: 100%;  /* sticky footer */
}

body {
    -webkit-font-smoothing: subpixel-antialiased !important;
    height: 100%; /* sticky footer */
}

.page-wrap {
    min-height: 100%; /* sticky footer */
}

.content-wrap {
    /* overflow: auto; /* sticky footer */
    padding-bottom: 50px; /* sticky footer, footer's height + 20px */
    min-height: 100%;
}

.footer-wrap {
    height: 30px; /* sticky footer */
    margin-top: -30px; /* sticky footer */
    position: relative; /* sticky footer */
}

.nav-link {
    color: #FFF;
}

.mycolor {
    background-color: #4d367b;
}

.w-30 {
    width: 30% !important;
}

.navbar-brand:hover,
.nav-link:hover {
    color: #3DCC3C;
}

.ask-btn,
.navbar-brand,
.nav-link
{
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    -webkit-transition: color .2s ease-in;
    transition: all .2s ease-in;
}

.ask-btn:hover {
    background-color: #3DCC3C;
}

.flip-card-scene {
    min-height: 100%;
    perspective: 3200px;
}

.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.is-flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
}

.card-front {
}

.card-back {
    transform: rotateY( 180deg );
}

p:empty {
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container content-wrap">
    <div class="flip-card-scene">
        <div class="flip-card">
            <div class="card-face card-front">
                <h4 class="text-center my-3 text-secondary" id="main-title">Front Title</h4> <!-- main title -->                
                <div class="row" id="cart-cont">
                    <div class="col-md-6">
                        <div class="card text-center mb-4 bg-light">
                            <h6 class="card-header text-secondary">Article 1</h6> <!-- card title -->
                            <div class="card-body">         
                                <p class="card-text"></p>
                            </div>
                        </div>

                        <div class="card text-center mb-4 bg-light">
                            <h6 class="card-header text-secondary">Article 2</h6> <!-- card title -->
                            <div class="card-body">         
                                <p class="card-text"></p>
                            </div>
                        </div>
                    </div><!-- 1 -->

                    <div class="col-md-6">

                        <div class="card text-center mb-4 bg-light">
                            <h6 class="card-header text-secondary">Article 3</h6> <!-- card title -->
                            <div class="card-body">         
                                <p class="card-text"></p>
                            </div>
                        </div>

                        <div class="card text-center mb-4 bg-light">
                            <h6 class="card-header text-secondary">Article 4</h6> <!-- card title -->
                            <div class="card-body">         
                                <p class="card-text"></p>
                            </div>
                        </div>
                    </div><!-- 2 -->
                        
                </div>

                <div class="row mb-4">
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn ask-btn text-white mycolor w-30" id="main-request">Action</button>
                    </div>
                </div>

            </div>

            <div class="card-face card-back">

                <h4 class="text-center my-3 text-secondary">Back Title</h4> <!-- main title -->
              
              <div class="row" id="cart-cont2">
                <div class="col-md-12">
    <div class="card text-center mb-4 bg-light">
        <h6 class="card-header text-secondary">Article 5</h6> <!-- card title -->
        <div class="card-body">         
            <p class="card-text"></p>
        </div>
    </div>
</div>

            </div>

        </div>
    </div>
</div>