Using CSS and JQuery, how can I flip a div vertically with one button and horizontally with another?

Question

I'm working on a web app with divs that currently flip horizontally and show an image on one side and a grid on the other. This is accomplished by clicking on a "button" (actually another div). I'd like to implement a third side, if you will, that allows users to enter options. This third side would be accessed by clicking a different "button" and it would cause the chart to flip vertically.

I've managed to make this work for the most part. I can flip in either direction just fine if it's solely horizontal (div 1 in my example), or vertical (div 2). When I merge the two together into the same div, however, the animation is broken for the horizontal flip (div 3). It only goes through half of the motion.

My sample HTML code consists of some simple divs:

<div id="one" class="flipper">
    <div class="front">
        <div class="hclick">Flip Me</div>
    </div>
    <div class="back">
        <div class="hclick">Flip Me</div>   
    </div>
</div>


<div id="two" class="vflipper">
    <div class="vfront">
        <div class="vclick">Flip Me</div>
    </div>
    <div class="vback">
        <div class="vclick">Flip Me</div>   
    </div>
</div>

<div id="three" class="flipper vflipper">
    <div class="front vfront">
        <div class="hclick">Flip Me</div>
        <div class="vclick">Flip Me</div>
    </div>
    <div class="back">
        <div class="hclick">Flip Me</div>   
    </div>
    <div class="vback">
        <div class="vclick">Flip Me</div>
    </div>

Here's my relevant css:

.flipper, .vflipper {
    position: absolute;
    perspective: 600px;
    -webkit-perspective: 600px;
        -moz-perspective: 600px;

}

.flipper .front, .flipper .back, .vflipper .vfront, .vflipper .vback{
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
            backface-visibility: hidden;


    -o-transition: transform .6s ease-in-out;
    -moz-transition: transform .6s ease-in-out;
    -webkit-transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out;

}

.flipper .front {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 900;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
.flipper.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flipper .back {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 800;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flipper.flip .back {
    z-index: 1000;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
}


/* vertical flipping stuff */

.vflipper {
    -webkit-transform-origin: 100% center;
    -moz-transform-origin: 100% center;
    -ms-transform-origin: 100% center;
    transform-origin: 100% center;
}


.vflipper .vfront {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 900;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
}
.vflipper.vflip .vfront {
    z-index: 900;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.vflipper .vback {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 800;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
.vflipper.vflip .vback {
    z-index: 1000;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

I have a jquery click event that toggles the flip class:

$(document).ready(function(){
    $('.hclick').click(function(){
        $(this).closest('.flipper').toggleClass('flip');
    });
    $('.vclick').click(function(){
        $(this).closest('.vflipper').toggleClass('vflip');
    });

As there's some sort of conflict there, I tried to remove the opposite class with jQuery before I added the flip class to the div (the fourth div). This resulted in an even worse animation:

HTML:

<div id="four" class="flipper vflipper">
        <div class="front vfront">
            <div class="fix">Flip Me</div>
            <div class="vfix">Flip Me</div>
        </div>
        <div class="back">
            <div class="fix">Flip Me</div>  
        </div>
        <div class="vback">
            <div class="vfix">Flip Me</div>
        </div>
</div>

jQuery:

$('.fix').click(function(){
    if($(this).closest('.flipper').hasClass('flip')) {
        $(this).closest('.flipper').removeClass('flip').addClass('vflipper').find('.front').addClass('vfront');
            } else {
                $(this).closest('.front').removeClass('vfront').closest('.flipper').removeClass('vflipper').addClass('flip');
            }
        });
        $('.vfix').click(function(){
            if($(this).closest('.vflipper').hasClass('vflip')) {
                $(this).closest('.vflipper').removeClass('vflip').addClass('flipper').find('.vfront').addClass('front');
            } else {
                $(this).closest('.vfront').removeClass('front').closest('.vflipper').removeClass('flipper').addClass('vflip');
            }
        });
    });

I've put together a jsfiddle to show my progress so far. https://jsfiddle.net/ckqde8up/1/

Is there a way to make this all work together? Any assistance would be appreciated. Thanks in advance for taking the time to read all of this.

Answer 1

The problem you are having is because of the transform property being set twice. When you set it to rotateX(0deg) in .vflipper .vfront , you're overwritting rotateY(0deg) in .flipper .front (like any other CSS property). I thought setting it transform to rotateY(0deg) rotateX(0deg) would fix the issue (you should be able to specify more than one transformation), but it didn't.

I still managed to fix it by removing the transform property from .flipper .front and .vflipper .vfront and placing them in selectors where they could not be applied at the same time (using the :not pseudo-class):

.flipper:not(.vflip){
    -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
            transform: rotateY(0deg);
}

.flipper:not(.flip){
    -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
}

I also removed the fix Javascript as it is not needed.

A working demo can be found here (see #three ).