javascript - 单击 Javascript 转换

Question

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

您可以在这里查看: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/

已编辑

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

抱歉造成误会! :)