При перелистывании карты с css задняя сторона показывает, но она не используется

Question

Я хотел создать эффект флипкарты css. На лицевой стороне находится форма для входа в систему, а на задней стороне - форма для регистрации (еще 2 поля ввода). Анимация правильно показывает переднюю и заднюю часть (даже если переход выглядит немного странно), но когда задняя сторона обращена к пользователю, я не могу щелкнуть или взаимодействовать с формой. Я работаю в React с модулями s css и вот код. Анимация происходит при нажатии кнопки «создать учетную запись». Я устанавливаю состояние и условно добавляю класс .flip, используя имя класса .

const formCardClass = cx({
    formCard: true,
    flip: isRegister,
  });

Вот рендер компонента:

<div className={styles.container}>
      <div className={formCardClass}>
        <div className={styles.formCardLogin}>
          <FormGroup>
            <h2>Login to your account</h2>
            <InputText type="email" name="email" placeholder="email" />
            <InputText type="password" name="password" placeholder="password" />
            <Button>Login</Button>
            <p>
              Not registered?{' '}
              <button type="button" onClick={btnClick} className={styles.btn}>
                Create an account
              </button>
            </p>
          </FormGroup>
          <div className={styles.formCardRegister}>
            <FormGroup>
              <h2>Register</h2>
              <InputText type="text" name="name" placeholder="Name" />
              <InputText type="email" name="email" placeholder="Email" />
              <InputText
                type="password"
                name="password"
                placeholder="Password"
              />
              <InputText
                type="password"
                name="password2"
                placeholder="Confirm password"
              />
              <Button>Register</Button>
              <p>
                Already registered?{' '}
                <button type="button" onClick={btnClick} className={styles.btn}>
                  Login here
                </button>
              </p>
            </FormGroup>
          </div>
        </div>
      </div>
    </div>

И это таблица стилей :

@import 'scss/config';

.container {
  padding: 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 60vh;
  column-gap: 5rem;

  background-image: linear-gradient(
      rgba($color-primary, 0.5),
      rgba($color-primary, 0.5)
    ),
    url(../../assets/images/background-img.jpg);
  clip-path: polygon(0 0, 50% 4%, 100% 0, 100% 100%, 50% 96%, 0 100%);
  background-size: cover;
  background-position: center;
  perspective: 50rem;
}

.formCard {
  grid-column: 2/3;
  position: relative;
  border-radius: $border-radius-default;
  transition: all 0.5s ease-out;

  &Login,
  &Register {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;

    transition: transform 0.5s;
    transform-style: preserve-3d;
    transform: rotateY(var(--flip-front, 0));
  }

  &Register {
    transform: rotateY(-180deg);
  }

  & p {
    color: $color-primary;
    transform: translateY(-0.8rem);
    justify-self: center;
  }
}

.btn {
  padding: 0.5rem;
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  border: none;
  outline: none;
  color: inherit;
  transition: all 0.2s;
  cursor: pointer;

  &:hover {
    transform: scale(1.05);
    color: $color-primary-dark;
  }

  &:active {
    transform: scale(1);
  }
}

.flip {
  --flip-front: -180deg;
}

Я надеюсь, что смогу объяснить проблему. Спасибо за любую помощь.

Answer 1

Если кому-то интересно, после хорошего ночного сна и еще немного терпения я решил это. Я сделал ошибку, закрыв теги div, поэтому задняя часть карточки формы была дочерней по отношению к лицевой стороне, а не соседней. (Я должен был закрыть div formCardLogin после первой группы FormGroup):

<div className={styles.formCardLogin}>
          <FormGroup>
            <h2>Login to your account</h2>
            <InputText type="email" name="email" placeholder="email" />
            <InputText type="password" name="password" placeholder="password" />
            <Button>Login</Button>
            <p>
              Not registered?{' '}
              <button type="button" onClick={btnClick} className={styles.btn}>
                Create an account
              </button>
            </p>
          </FormGroup>
----->  </div>

Затем в таблице стилей я создал еще одну переменную, которая при активном перевороте класса превращает обратную сторону обратно в 0deg.

.flip {
  --flip-front: -180deg;
  --flip-back: 0deg;
}