点击Javascript转换

我试图通过点击一个按钮来实现翻转卡片的效果，但是我不能完全理解Javascript。事实上，我对Javascript一无所知，所以我试图找到类似的解决方案，并根据自己的需要进行修改，但没有结果。下面是它现在作为

：hover

样式的CSS

您可以在此处查看：

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

如有任何建议，将不胜感激。多谢各位

丹，我找到了这个。这可能对你有帮助。这里有一个插件列表，可以实现翻转效果：

已编辑

这可能对你有帮助！我只在

.front

和

.back

中切换类

.flip

。（）

---

抱歉误会了！：）

我知道您要求使用javascript，但我的解决方案是使用JQuery。在每个按钮上使用click函数，然后可以使用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");

});

当然，您最初会想隐藏“backbutton”

---

因此，当您单击“前”按钮时，它将更改您拥有的“flipcard”的类别，使其翻转。然后，“frontbutton”将隐藏，并在其位置放置现在可见的“backbutton”。单击“上一步”按钮时，应触发相同的过程，但相反。

也在此处发布相关的HTML和Javascript。感谢您提供有关使用插件的提示。我已经尝试了一些插件来实现这一点，但无法得到我想要的结果，这就是为什么我试图在没有插件的情况下做到这一点。另外，这也是我扩展知识的一个好方法。你想自己动手做！；），这是一个好主意，我喜欢它！：）好的，这太好了。。。。它工作得非常出色，我现在可以看到并理解它是如何工作的。现在只需要做一点实验，但这是一个很好的起点。谢谢你很高兴听到这对你有帮助！：）你能标记它已解决吗？；）你好，谢谢你。我试过用它做实验，但不幸的是我不能让它工作。但我会继续尝试。