Html 3d cardflip不在容器内

我试着跟随本教程（第二个标题向下，“幻灯片翻转”，这是他的结果），但我与教程作者有一个主要区别——虽然他的卡片留在盒子里，并且似乎沿着Z轴向后推，但我的卡片似乎移近了观众，因此肯定不会留在盒子里

我的浏览器是Ubuntu Linux上的Chromium，但我也尝试过Firefox

这是我的小提琴：

下面是示例代码（我在小提琴里有）

HTML

和JS用于测试：

$(function () {
    setTimeout(function(){
        $("#module_1_cardContainer").addClass("cardIsFlipped-horizontal");    
    },1500);
});

---

好的，我必须为透视图添加一个高的数字，在我的例子中是5000，因为整个页面的分辨率是高清的。这就足够让它后退了

.sidebar {
    margin-top:20px;
    border:solid 1px black;
    width:100%;
    height:300px;
    position:relative;
    perspective:800px;
    -webkit-perspective:800px;
}      

.slide {
    background-color:red;
    height:100%;
    width:100%;
}

.cardContainer {
        width:100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3D;
        -webkit-transform-style: preserve-3D;
        transition: transform 1s;
        -webkit-transition: -webkit-transform 1s;

        transform-origin: right center;
        -webkit-transform-origin: right center;
      }

      .cardFront, .cardBack-horizontal, .cardBack-vertical {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3D;
        -webkit-transform-style: preserve-3D;
      }

      .cardBack-horizontal {
        transform: rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
      }

      .cardIsFlipped-horizontal {
        transform: translateX( -100% ) rotateY( 180deg );
        -webkit-transform: translateX( -100% ) rotateY( 180deg );
      }

$(function () {
    setTimeout(function(){
        $("#module_1_cardContainer").addClass("cardIsFlipped-horizontal");    
    },1500);
});