使用CSS和JQuery，如何用一个按钮垂直翻转div，用另一个按钮水平翻转div？

我正在开发一个带有div的web应用程序，当前div水平翻转，一面显示图像，另一面显示网格。这是通过点击一个“按钮”（实际上是另一个div）来实现的。我想实现第三个方面，如果你愿意的话，它允许用户输入选项。点击另一个“按钮”可以进入第三面，这会导致图表垂直翻转

我在很大程度上成功了。我可以朝任意方向翻转，只要它是水平的（在我的例子中是div1），或者是垂直的（div2）。但是，当我将两者合并到同一个div中时，水平翻转（div 3）的动画将中断。它只通过了议案的一半

我的示例HTML代码由一些简单的div组成：

<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>

我有一个jquery click事件，用于切换翻转类：

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

由于存在某种冲突，在将flip类添加到div（第四个div）之前，我尝试用jQuery删除相反的类。这导致了更糟糕的动画：

HTML:

我已经整理了一个JSFIDLE来展示我到目前为止的进展

---

有没有办法让这一切一起工作？任何协助都将不胜感激。提前感谢您花时间阅读所有这些内容。

您遇到的问题是因为

transform

属性设置了两次。当您在

.vflipper.vfront

中将其设置为

rotateX（0deg）

时，您正在覆盖

.flipper.front

中的

rotateY（0deg）

（与任何其他CSS属性一样）。我认为将它设置为旋转（0deg）旋转（0deg）可以解决这个问题（您应该能够指定多个转换），但它没有

我仍然设法通过从

.flipper.front

和

.vflipper.vfront

中删除

transform

属性并将它们放置在选择器中（使用伪类）来修复它：

我还删除了

fix

Javascript，因为它不是必需的

---

可以找到一个工作的演示（请参见

#three

）。

就是这样做的！非常感谢你的帮助！

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

<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>

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

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