HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

<本文>
  <div class="mainbody middle">
    <form class="フォームボックス前面">
      <div>
        <h1>ログイン</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="ユーザーアカウント" />
        <input class="input-normal" type="password" placeholder="PassWord" />
        <button class="btn-submit" type="submit">
          ログイン
        </ボタン>
      </div>
      <div>
        <p style="margin-top: 40px">アカウントをお持ちでない場合は</p>
        <p><a id="signin">サインアップ</a>するにはここをクリックしてください</p>
      </div>
    </フォーム>
    <!-- はい、正しくお読みいただけました。基本的に上部フォームと下部フォームに違いはありません。一方が前面で、もう一方が背面です -->
    <form class="form-b​​ox 戻る">
      <div>
        <h1>登録</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="ユーザーアカウント" />
        <input class="input-normal" type="password" placeholder="PassWord" />
        <button class="btn-submit" type="submit">
          登録する
        </ボタン>
      </div>
      <div>
        <p style="margin-top: 40px">アカウントをお持ちですか?</p>
        <p><a id="login">ログイン</a>するにはここをクリックしてください</p>
      </div>
    </フォーム>
  </div>
</本文>

体 {
  /*色は個人の好みによります*/
  背景: ダークスレートグレー;
  /*フォントは個人の好みによります*/
  フォントファミリー: サンセリフ;
}

/*主に中央のフォームのサイズを設定します。見た目がよいと思われるサイズに調整してください*/
.メインボディ{
  高さ: 440ピクセル;
  幅: 400ピクセル;
}

/*センタリング効果*/
。真ん中 {
  /*左上隅を親要素の中心に一致させる*/
  上位: 50%;
  左: 50%;
  位置: 絶対;
  /*左上に 50% シフト*/
  変換: translate(-50%, -50%);
}

.フォームボックス{
  幅: 100%;
  高さ: 100%;
  マージン: 自動;
  背景: ダークシアン;
  /* この丸い角の大きさはちょうどいいと思います*/
  境界線の半径: 40px;
}

.input-normal {
  幅: 220ピクセル;
  高さ: 38px;
  マージン: 30px 自動;
  パディング: 0;
  テキスト配置: 中央;
  境界線の半径: 20px;
  アウトライン: なし;
  表示: ブロック;
  遷移: 0.3秒;
  境界線: 1px 実線 #e6e6e6;
}

.btn-送信{
  幅: 100ピクセル;
  高さ: 36px;
  マージン: 自動;
  フォントサイズ: 18px;
  テキスト配置: 中央;
  色: 白;
  境界線の半径: 20px;
  表示: ブロック;
  背景: ダークスレートグレー;
  遷移: 0.3秒;
}

。フロント {
  変換: rotateY(0deg);
}

/* 背面を 180 度回転し、背面をユーザーに向けてください。ここでは y 軸を選択します */
。戻る {
  変換: rotateY(-180deg);
}

。フロント、
。戻る {
  位置: 絶対;
  /* 次に、背面がユーザーを向いているときに非表示になるように設定します */
  背面の可視性: 非表示;
  /* 線形の方がスムーズだと思います */
  遷移: 0.3 秒の線形;
}

/* 前面を180度回転 */
.middle-flip .front {
  変換: rotateY(180deg);
}
/* 180 度回転します */
.middle-flip .back {
  変換: rotateY(0deg);
}

/* 少し調整しましたが、見栄えは良いと思います。もっと見栄えの良いものに変更することもできます。*/
ｐ {
  マージン: 15px 自動;
  パディング: 0;
  フォントサイズ: 16px;
  色: 白;
  表示: ブロック;
  テキスト配置: 中央;
}
{
  色: アクア;
  カーソル: ポインタ;
}
js

// sigup をクリックすると反転スタイルがトリガーされます $("#sigup").click(function() {
  $(".middle").toggleClass("middle-flip");
});
// ログインをクリックすると反転スタイルがトリガーされます $("#login").click(function() {
  $(".middle").toggleClass("middle-flip");
});