单击 Javascript 转换

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. It may helps you. And here there is a list of plugin that do flip effect: http://www.sitepoint.com/10-jquery-flip-effect-plugins/

已编辑

这可能对你有帮助！我只在 .front 和 .back 中切换 class .flip 。 (http://jsfiddle.net/0x13mL26/3/)

抱歉造成误会！ :)

Answer 2

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

$( "#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" 的 class，使其翻转。然后 "frontbutton" 将隐藏，您可以在其位置放置现在可见的 "backbutton"。单击后退按钮时，它应该触发相同但相反的过程。

单击 Javascript 转换

On click Javascript transform

javascript

css

click

rotation