如何改变CSS翻转动画按钮点击

how to change css for flip animation on button click?

本文关键字：动画 翻转 按钮 CSS 何改变 改变      更新时间：2023-09-26

我已经设法适应了一个解决方案，以获得一个密码形式翻转到使用css的形式。然而，目前它只能在鼠标悬停时工作，而不能在点击时工作，这显然是用户需要能够做到的，否则表单的一侧将永远无法在鼠标悬停时填写。

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

我想把它放进一个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 );
}

我可以改变它为'click'， 'button'或其他东西，例如?

谢谢

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

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

所以我必须将悬停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 );
}
相关文章：