3d cardflip not staying within container

Question

I have tried to follow this tutorial http://desandro.github.io/3dtransforms/docs/card-flip.html (second heading down, "Slide flip", here's his result http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html) but I get one major difference from the tutorial writer - while his card stays within the box and seems to be pushed back along the Z axis, my card seems to be moved closer to the viewer and thus definately not staying within the box.

My browser is Chromium on Ubuntu Linux but I have also tried Firefox.

Here is my fiddle: http://jsfiddle.net/vASj9/2/

And here is the sample code (that I have in the fiddle)

HTML

    <div id="module_1" class="sidebar debug">
        <div id="module_1_cardContainer" class="cardContainer">
            <div id="module_1_cardFront" class="cardFront">
                <div id="module_1-slide_1" class="slide">Front</div>
            </div>
            <div id="module_1_cardBack" class="cardBack-horizontal">
                <div id="module_1-slide_2" class="slide">Back</div>
            </div>        
        </div>
    </div>

CSS

.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 );
      }

And JS for testing:

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

Answer 1

OK, I had to add a high number for perspective, in my case 5000 since the entire page resolution is in HD. That pushes it back enough.