如何在按钮点击时更改翻转动画的CSS？

i have managed to adapt a solution to get a password form to flip round into a sign in form using just css. however, at the moment it just works on hover and not on click which is obviously what a user needs to be able to do otherwise one side of the form will never be able to filled out on hover.

我已经设法调整了一个解决方案来获取密码表单,只需使用css就可以转换为登录表单。然而,目前它只是在悬停而不是点击上工作,这显然是用户需要能够做的事情,否则表格的一面永远不能在悬停时填写。

here is a jsfiddle showing what is happening: https://jsfiddle.net/xw6okx4n/

这是一个显示正在发生的事情的jsfiddle:https://jsfiddle.net/xw6okx4n/

i thought about putting it into a js function and then calling the onclick method however my mind is just drawing blanks when i try to consider how you would call some of the particular css animation. alternatively is there a way with css that where i have hover below:

我想把它放入一个js函数,然后调用onclick方法,但是当我试着考虑如何调用某些特定的css动画时,我的脑子只是画空白。或者有一种方法用css我在哪里悬停:

.flip3D:hover > .container2{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .container1{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}

i can change it to 'click', 'button' or something else for example?

我可以将其更改为“点击”,“按钮”或其他类似的东西吗?

thanks

1 个解决方案

#1

I updated your jsFiddle. I removed the hover effect and replaced it with a call to a function, which toggles class rotated on .flip3D every time the button #rotateButton is clicked.

我更新了你的jsFiddle。我删除了悬停效果并将其替换为函数调用,每次单击按钮#rotateButton时,该函数都会切换.flip3D上旋转的类。

$(document).ready(function() {
    $("#rotateButton").click(function() {
        $(".flip3D").toggleClass("rotated");
    });
});

So I had to change the hover CSS to:

所以我不得不将悬停CSS更改为:

.flip3D.rotated > .container2{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D.rotated > .container1{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}

I believe it does exactly what you want it to do.

我相信它完全符合您的要求。

#1