demo

Question

我有一个简单的登录表单和注册表单，当前它们在容器悬停时在y轴上旋转，然后在移除悬停时旋转回来开始。

我需要的是绑定它所以当单击注册按钮时，它会翻转到背面（注册页面），然后如果我单击“登录”按钮，它将再次恢复到正面。

这是消除文本墙的fiddle。

任何得到的帮助。

Answer 1

这很简单，你几乎就在那里。你有

/*#f1_container:hover #f1_card,*/ #f1_container.hover_effect #f1_card {
  transform: rotateY(180deg);
}

在你的CSS中，你只需要在单击Register / To Login按钮时添加/删除.hover_effect类，这就是全部。

只需要一些JavaScript：

var face_changers = document.querySelectorAll('.btnFlip'), 
    f1_container = document.getElementById('f1_container');

for(var i = 0; i < face_changers.length; i++){
    face_changers[i].addEventListener('click', function(e) {
        f1_container.classList.toggle('hover_effect');
        e.preventDefault();
    }, false);
}

demo

[请注意，我还评论了悬停部分，因此不再有悬停翻转;除此之外，我没有对CSS或HTML进行任何更改]

Answer 2

您需要将一个类添加到以下选择器的开头

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card

将旋转设置为零，然后在点击时切换该类。

编辑：

您正在使用选择器旋转卡

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

为了在悬停时不总是让它旋转，您需要提供一个更具体的选择器来覆盖该规则。您可以通过添加任何选择器来执行此操作。最好的方法是在父元素中添加一个类。所以新规则将如下所示

.registered#f1_container:hover #f1_card, .registered#f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

将匹配id为f1_container 的元素以及已注册的类，而不仅仅是id为f1_container的元素

当你点击注册按钮时，你需要通过执行一些javascript来切换元素。

按钮上没有唯一的id或类，因此点击侦听器的jQuery选择器有点毛茸茸

$('#frmReg button:not(".btnFlip")').on('click', function(){
  $('btnFlip').addClass('registered')
})

显然，如果您只是为该按钮添加一个id，它会更简单一些。

CSS按钮单击时转换旋转

2 个答案:

demo