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

Question

我正在开发一个带有div的网络应用程序，这些div目前可以水平翻转，一边显示图像，另一边显示网格。 这可以通过单击“按钮”（实际上是另一个div）来完成。 如果愿意的话，我想实施第三方，允许用户输入选项。 通过单击不同的“按钮”可以访问此第三面，这将导致图表垂直翻转。

我已经成功地完成了这项工作。 如果它只是水平（在我的例子中为div 1）或垂直（div 2），我可以向任一方向翻转。 但是，当我将两者合并为同一个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>

这是我的相关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);
}

我有一个jquery点击事件切换翻转类：

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

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

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

到目前为止，我已经汇集了一个jsfiddle来展示我的进步。 https://jsfiddle.net/ckqde8up/1/

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

Answer 1

您遇到的问题是因为transform属性被设置了两次。 当你将它设置为rotateX(0deg)在.vflipper .vfront ，你overwritting rotateY(0deg)在.flipper .front （像任何其他的CSS属性）。 我认为设置它transform为rotateY(0deg) rotateX(0deg)将解决问题（你应该能够指定多个转换），但它没有。

我仍然设法通过从.flipper .front和.vflipper .vfront删除transform属性来修复它，并将它们放在选择器中，它们不能同时应用（使用: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);
}

我也删除了fix Javascript，因为它不需要。

可以在这里找到工作演示（参见#three ）。