翻转动画 - 背面可见性不起作用

Question

所以我目前正在项目中的一些元素上实现一些翻转动画。

我通过CSS和ontouchstart属性实现了悬停动画。但是，卡或元素的背面从未显示过。但是当我创建以下JSFiddle时：https://jsfiddle.net/pueg0uxm/

这是我尝试完成的效果，但由于某种原因，此代码在我的项目中无效。

我可能影响它的唯一其他类是以下内容;

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="child" style="animation-delay: 6.5s;">
            <div class="front" ng-style={'backgroundimage':'url(/assets/02_BRANDING.jpg)'}">
                <h1 class="feature-text">RETAIL<br/>DESIGN</h1>
            </div>
            <div class="back">
                <div>
                   <h1 >Portland...</h1>
                </div>
           </div>
      </div>
   </div>
</div>

.child {
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 50%;
    width: 25%;
    max-width: calc(100% * (1/4));
    margin: 0;
    position: relative;
    -ms-flex-flow: nowrap row;
    flex-flow: nowrap row;
}

以下是与具有相同代码的JSFiddle相比发生的事情的GIF;

正如您所看到的那样，背面仍然是可见的，而不是后面类和div中的代码。