3Dチルト・ガラスログイン

マウス位置に合わせて立体的に傾くガラス調のログインパネル。perspective と backdrop-filter を組み合わせた没入感のあるフォームです。

#css#glassmorphism#3d#javascript#form

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：3Dチルトするガラスログイン -->
<section class="tl-scene">
  <span class="tl-orb tl-orb--1"></span>
  <span class="tl-orb tl-orb--2"></span>

  <!-- 傾くガラスログインパネル -->
  <div class="tl-stage" id="tlStage">
    <form class="tl-card" id="tlCard" autocomplete="off">
      <div class="tl-card__brand">
        <span class="tl-card__mark">◆</span> FlowDesk
      </div>
      <h2 class="tl-card__title">おかえりなさい</h2>
      <p class="tl-card__sub">アカウントにサインインしてください</p>

      <label class="tl-field">
        <span>メールアドレス</span>
        <input type="email" value="taro@flowdesk.io" required>
      </label>
      <label class="tl-field">
        <span>パスワード</span>
        <input type="password" value="password" required>
      </label>

      <div class="tl-card__row">
        <label class="tl-check"><input type="checkbox" checked> ログイン状態を保持</label>
        <a href="#" class="tl-card__link">お困りですか？</a>
      </div>

      <button class="tl-card__btn" type="submit">サインイン</button>
      <p class="tl-card__signup">アカウント未作成？ <a href="#">無料登録</a></p>
    </form>
  </div>
</section>

CSS

/* FlowDesk：3Dチルトするガラスログイン */
:root {
  --navy: #0f1b34;
  --blue: #4f7cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 400px;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  background: radial-gradient(120% 120% at 20% 10%, #1b2c52 0%, #0f1b34 55%, #0a132a 100%);
  overflow: hidden;
}

.tl-scene {
  position: relative;
  width: 100%;
  height: 400px;
  display: grid;
  place-items: center;
}

/* 背景の発光オーブ（ガラスの透過を引き立てる） */
.tl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
}
.tl-orb--1 { width: 200px; height: 200px; background: #4f7cff; top: 8%; left: 12%; }
.tl-orb--2 { width: 170px; height: 170px; background: #7a5cff; bottom: 6%; right: 14%; }

/* 3D空間 */
.tl-stage {
  perspective: 900px;
}

/* ガラスカード本体（JSで rotateX/Y） */
.tl-card {
  position: relative;
  width: min(320px, 86vw);
  padding: 26px 26px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  color: #eef2ff;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.15s ease-out;
}

.tl-card__brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cdd8ff;
  margin-bottom: 14px;
  transform: translateZ(30px);
}
.tl-card__mark { color: var(--blue); }

.tl-card__title { margin: 0 0 4px; font-size: 21px; font-weight: 800; transform: translateZ(24px); }
.tl-card__sub { margin: 0 0 18px; font-size: 12px; color: rgba(255,255,255,0.7); transform: translateZ(18px); }

.tl-field { display: block; margin-bottom: 12px; transform: translateZ(14px); }
.tl-field span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 5px;
}
.tl-field input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tl-field input:focus { border-color: var(--blue); background: rgba(79,124,255,0.14); }

.tl-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 16px;
  transform: translateZ(12px);
}
.tl-check { font-size: 11px; color: rgba(255,255,255,0.78); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.tl-check input { accent-color: var(--blue); }
.tl-card__link { font-size: 11px; color: #9db4ff; text-decoration: none; }
.tl-card__link:hover { text-decoration: underline; }

.tl-card__btn {
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 0;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #5f8bff, #4f7cff);
  box-shadow: 0 10px 24px rgba(79,124,255,0.45);
  transform: translateZ(36px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tl-card__btn:hover { box-shadow: 0 14px 30px rgba(79,124,255,0.6); }
.tl-card__btn:active { transform: translateZ(36px) scale(0.98); }

.tl-card__signup { margin: 14px 0 0; font-size: 11px; text-align: center; color: rgba(255,255,255,0.7); transform: translateZ(10px); }
.tl-card__signup a { color: #9db4ff; text-decoration: none; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .tl-card { transition: none; transform: none !important; }
}

JavaScript

// マウス位置に合わせてガラスカードを3Dチルトさせる
const stage = document.getElementById("tlStage");
const card = document.getElementById("tlCard");

if (stage && card) {
  const MAX = 9; // 最大傾き角(度)

  stage.addEventListener("pointermove", (e) => {
    const rect = card.getBoundingClientRect();
    // カード中心からの相対位置を -0.5〜0.5 に正規化
    const px = (e.clientX - rect.left) / rect.width - 0.5;
    const py = (e.clientY - rect.top) / rect.height - 0.5;
    // 上下=rotateX、左右=rotateY
    card.style.setProperty("--rx", `${(-py * MAX).toFixed(2)}deg`);
    card.style.setProperty("--ry", `${(px * MAX).toFixed(2)}deg`);
  });

  // 離れたら水平に戻す
  stage.addEventListener("pointerleave", () => {
    card.style.setProperty("--rx", "0deg");
    card.style.setProperty("--ry", "0deg");
  });

  // 送信はデモなのでページ遷移させない
  card.addEventListener("submit", (e) => {
    e.preventDefault();
    const btn = card.querySelector(".tl-card__btn");
    if (!btn) return;
    const label = btn.textContent;
    btn.textContent = "サインイン中…";
    setTimeout(() => { btn.textContent = label; }, 1400);
  });
}

実装ガイド

使いどころ

ログイン/サインアップフォーム、特集モーダル、製品紹介のインタラクティブなヒーローパネルなど、没入感と高級感を出したい場面に向きます。マウス追従の3D傾斜が加わるため、ファーストビューで印象付けたい単体パネルに最適です。

実装時の注意点

親に perspective を、パネルに transform-style: preserve-3d と rotateX/rotateY を与え、回転角は JS が -0.5〜0.5 に正規化したマウス位置から算出して CSS 変数(--rx/--ry)で渡します。傾きと backdrop-filter のガラス質感を両立させ、入力欄も半透明にして一体感を出します。prefers-reduced-motion 時は JS 側で傾斜を無効化し、CSS でも transform: none に戻す二重の配慮が入っています。

対応ブラウザ

backdrop-filter は Chrome/Edge 標準、Firefox 103+ 標準、Safari は -webkit- プレフィックス必須（本デモ併記）です。3D 変換（perspective/rotateX/preserve-3d）は全モダンブラウザ対応ですが、親要素に backdrop-filter があると 3D 描画コンテキストやフィルタ適用が崩れる組み合わせ問題があるため、傾斜とフィルタの掛かる要素の階層設計に注意が必要です。

よくある失敗

暗背景に白半透明パネル＋白文字でコントラストが不足しやすく、入力文字やプレースホルダの可読性が落ちがちです。傾斜角を大きくしすぎると文字が読みづらく酔いやすく、フォーム入力中に傾くと操作性を損ないます。backdrop-filter＋3D変換は両方とも GPU を使うため低スペック端末で重く、タッチ端末では pointermove での傾斜が働かない（または誤作動する）点も見落としがちです。

応用例

傾斜に連動して光沢グラデの位置も動かすと立体感が増し、影(box-shadow)も角度で動かすと地に足が付きます。入力フォーカス時は傾斜を一時停止して操作性を確保、reduced-motion とタッチ判定でアニメを切る、視差(parallax)で背景オーブを逆方向に動かす、といった発展でリッチさと使いやすさを両立できます。

コード