2

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

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

这是消除文字墙的小提琴。

任何帮助表示赞赏。

4

2 回答 2

2

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

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

在您的 CSS 中，您只需.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);
}​

演示

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

于 2012-10-15T00:14:46.143 回答
1

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

#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，它会更简单一些。

于 2012-10-14T23:37:18.197 回答