css transform 2 faced cube always rotate up

Question

i'm trying flip this 2 faced cube so it looks like it is always rotating up.

here is what I have so far

demo https://jsfiddle.net/m5z0u6ct/2/

I increase the degrees by 90 degrees each time you click the button. but at 270 degrees the cube rotates down. 1) How can I make it so the cube continually rotates up on each click? 2) How can I prevent the text from flipping after the 2nd click? (I'd like the text to always look right side up like it does on the first two clicks)

/* Container box to set the sides relative to */
    .cube {
        width: 30%;
        text-align: center;
        margin: 0 auto;
        height: 100px;

        -webkit-transition: -webkit-transform .33s;
        transition: transform .33s; /* Animate the transform properties */

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d; /* <-NB */
    }

    /* The two faces of the cube */
    .flippety,.flop {
        background: rgb(247, 247, 247);
        border: 1px solid rgba(147, 184, 189, .8);

        -webkit-border-radius: 5px;
        border-radius: 5px;

        -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
        box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
        height: 100px;
    }

    /* Position the faces */
    .flippety {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
    }

    .flop {
        -webkit-transform: rotateX(-90deg) translateZ(-50px);
        transform: rotateX(-90deg) translateZ(-50px);
    }

    /* Rotate the cube */
    .cube:hover {
        -webkit-transform: rotateX(89deg);
        transform: rotateX(89deg); /* Text bleed at 90º */
    }
    .cuberotate {
            width: 30%;
        text-align: center;
        margin: 0 auto;
        height: 100px;

        -webkit-transition: -webkit-transform .33s;
        transition: transform .33s; /* Animate the transform properties */

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg); /* Text bleed at 90º */
    }


    .cuberotateit {
            width: 30%;
        text-align: center;
        margin: 0 auto;
        height: 100px;

        -webkit-transition: -webkit-transform .33s;
        transition: transform .33s; /* Animate the transform properties */

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(89deg);
        transform: rotateX(89deg); /* Text bleed at 90º */
    }



     var degrees=0;

    $("#btnflipflop").on('click', function (e) {

                    $("#questioncube").attr('class', "cuberotateit");


                    degrees = degrees + 90;


                    $('.cuberotateit').css('-webkit-transform', 'rotateX(' + degrees + 'deg)');
                    $('.cuberotateit').css('transform', 'rotateX(' + degrees + 'deg)');




                });

     <div id="questioncube" class="cube">
            <div id="card1" class="flippety">
                <h1>Flippity</h1>
            </div>
            <div id="card2" class="flop">
                <h2>Flop</h2>
            </div>
        </div>

Answer 1

It is working correctly. You only have two of the four faces so what you're seeing is the back side of the two faces for the 3rd and 4th iterations. See this with backface-visibility: hidden; added.

Update

You need to set position: relative; on the .cube and position: absolute; width: 100%; height: 100%; on each of the faces. If you disable the transform and -webkit-transform on each of the faces, you'll see how the default position: static; affects their layout.

Here's a demo of the updated (and cleaned) code:

var degrees = 0;

$("#btnflipflop").on('click', function(e) {
  degrees += 90;

  $('#questioncube').css('-webkit-transform', 'rotateX(' + degrees + 'deg)');
  $('#questioncube').css('transform', 'rotateX(' + degrees + 'deg)');
});

/* Container box to set the sides relative to */
.cube {
  width: 30%;
  text-align: center;
  margin: 0 auto;
  height: 100px;
  -webkit-transition: -webkit-transform .33s;
  transition: transform .33s;
  /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* <-NB */
  position: relative;
}
.face1,
.face2,
.face3,
.face4 {
  background: rgb(247, 247, 247);
  border: 1px solid rgba(147, 184, 189, .8);
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
  box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
  height: 100px;
  position: absolute;
  width: 100%;
  height: 100%;
}
.face1 {
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}
.face2 {
  -webkit-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
}
.face3 {
  -webkit-transform: rotateX(-180deg) translateZ(50px);
  transform: rotateX(-180deg) translateZ(50px);
}
.face4 {
  -webkit-transform: rotateX(-270deg) translateZ(50px);
  transform: rotateX(-270deg) translateZ(50px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questioncube" class="cube">
  <div id="card1" class="face1">
    <h1>face1</h1>
  </div>
  <div id="card2" class="face2">
    <h2>face2</h2>
  </div>
  <div id="card3" class="face3">
    <h1>face3</h1>
  </div>
  <div id="card4" class="face4">
    <h2>face4</h2>
  </div>
</div>

<input id="btnflipflop" type="button" value="flipme" />