Question

我试图通过点击按钮实现翻转卡效果，但我无法弄清楚Javascript。我实际上对Javascript一无所知所以我试图找到类似的解决方案并根据我的需要改变它们但没有结果。下面是CSS现在的:hover样式。

您可以在此处查看：http://dangoodeofficial.co.uk/290-2

CSS：

.flip3D { 
    float: left;
    display: block;
    position: relative;
    width: auto;
    height: 675px;
    }

.flip3D .front {
    position: absolute;
    -o-transform: perspective(600px)RotateY( 0deg );
    -moz-transform: perspective(600px)RotateY( 0deg );
    -ms-transform: perspective(600px)RotateY( 0deg );
    -webkit-transform: perspective(600px)RotateY( 0deg );
    transform: perspective(600px)RotateY( 0deg );
    -o-transform-backface-visibility: hidden;
    -moz-transform-backface-visibility: hidden;
    -ms-transform-backface-visibility: hidden;
    -webkit-transform-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -o-transform .5s linear 0s;
    transition: -moz-transform .5s linear 0s;
    transition: -ms-transform .5s linear 0s;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
    width: 100%;

}

.flip3D .back {
    position: absolute;
    -o-transform: perspective(600px)RotateY( 180deg );
    -moz-transform: perspective(600px)RotateY( 180deg );
    -ms-transform: perspective(600px)RotateY( 180deg );
    -webkit-transform: perspective(600px)RotateY( 180deg );
    transform: perspective(600px)RotateY( 180deg );
    -o-transform-backface-visibility: hidden;
    -moz-transform-backface-visibility: hidden;
    -ms-transform-backface-visibility: hidden;
    -webkit-transform-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -o-transform .5s linear 0s;
    transition: -moz-transform .5s linear 0s;
    transition: -ms-transform .5s linear 0s;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
    width: 100%;
}

.flip3D:hover > .front {
    -o-transform: perspective(600px)RotateY( -180deg );
    -moz-transform: perspective(600px)RotateY( -180deg );
    -ms-transform: perspective(600px)RotateY( -180deg );
    -webkit-transform: perspective(600px)RotateY( -180deg );
    transform: perspective(600px)RotateY( -180deg );

}

.flip3D:hover > .back  {
    -o-transform: perspective(600px)RotateY( 0deg );
    -moz-transform: perspective(600px)RotateY( 0deg );
    -ms-transform: perspective(600px)RotateY( 0deg );
    -webkit-transform: perspective(600px)RotateY( 0deg );
    transform: perspective(600px)RotateY( 0deg );

}

我的前面有.flip-button个按钮，后面有.flip-back个按钮。

任何建议都将不胜感激。谢谢。

丹

Answer 1

我发现了plugin。它可能会帮助你。这里有一个插件列表，可以执行翻转效果：http://www.sitepoint.com/10-jquery-flip-effect-plugins/

<强>被修改

这可能会对你有所帮助！我只切换.flip和.front中的课程.back。（http://jsfiddle.net/0x13mL26/3/）

对不起有误！：）

Answer 2

我知道你要求使用javascript，但我的解决方案是使用JQuery。在每个按钮上使用单击功能，然后您可以使用Jquery的.removeClass和.addClass方法更改单击按钮时需要翻转的卡类。这样的事情应该有效：

$( "#frontbutton" ).click(function() {

    $("#flipcard").addClass('back');
    $("#flipcard").removeClass('front');
    $("#frontbutton").css("display","none");
    $("#backbutton").css("display","static");

});


$( "#backbutton2" ).click(function() {

    $("#flipcard").addClass('front');
    $("#flipcard").removeClass('back');
    $("#backbutton").css("display","none");
    $("#frontbutton").css("display","static");

});

当然你最初想要隐藏“后退按钮”。

因此，当您单击前面按钮时，它将更改您翻转的“翻转卡”类。然后隐藏“frontbutton”，并在其位置放置现在可见的“backbutton”。单击后退按钮时，它应该触发相同的过程，但相反。

点击Javascript转换

2 个答案: