如何解决CSS卡片翻转实现Django注册登录表单切换的相关问题

我正在为我的新Django项目开发注册表单，希望实现默认展示注册表单、用户hover时翻转展示登录表单的交互效果，参考效果如下：

问题1：为什么属于front类的两个按钮会在翻转后仍然显示？
问题2：我尝试使用flex box对登录表单内的元素进行居中，但没有生效，请问是什么原因导致的？

问题解答 #

问题1修复方案 #

故障原因：
翻转容器.my-register-container未设置高度，内部.front和.back都是绝对定位元素，脱离文档流后父容器高度为0，导致3D翻转空间上下文渲染异常，backface-visibility: hidden属性无法正常生效，正面内容翻转后没有被隐藏，部分场景下透明背景也会透出下层内容。

修复代码（CSS部分新增/修改）：

.my-register-container {
  transform-style: preserve-3d;
  transition: all .5s ease;
  position: relative;
  /* 新增以下两行 */
  height: 100%;
  background-color: #fff;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* 兼容webkit内核浏览器 */
  -webkit-backface-visibility: hidden;
  /* 新增背景避免透明透出 */
  background-color: #fff;
}

问题2修复方案 #

故障原因：

1. 登录表单HTML存在语法错误：密码输入框行末尾有多余的</p>闭合标签，导致DOM结构解析异常，CSS样式无法正常作用在后续元素上
2. 未给登录表单父容器正确配置flex布局属性，默认表单元素自带的边距、对齐属性会覆盖flex配置

修复步骤：

1. 修正HTML语法错误，删除多余闭合标签

<!-- 错误代码 -->
<input type="password" name="password" placeholder="Enter your password" autocomplete="current-password" required="" id="id_password"></p>

<!-- 修正后代码 -->
<input type="password" name="password" placeholder="Enter your password" autocomplete="current-password" required="" id="id_password">

2. 新增flex居中CSS配置

.back form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

.back .my-register-form-field {
  width: 100%;
  padding-left: 0;
}

内容的提问来源于stack exchange，提问作者Ujjwal Saxena