入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。
.tilt-card {
width: 320px;
height: 400px;
background: #FFFFFF;
border: 1px solid #1A1A1A;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Oswald', sans-serif;
font-size: 2.5rem;
font-weight: 600;
letter-spacing: 0.1em;
color: #1A1A1A;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transform-style: preserve-3d;
cursor: pointer;
will-change: transform;
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.15);
}
/* Important: parent needs perspective */
.stage { perspective: 1200px; }
@media (prefers-reduced-motion: reduce) { .tilt-card { transition: none; } }
@media (hover: none) { .tilt-card { transform: none !important; } }const card = document.querySelector('.tilt-card');
const maxTilt = 15; // degrees
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
const rotateY = (x - 0.5) * 2 * maxTilt;
const rotateX = (0.5 - y) * 2 * maxTilt;
card.style.transform =
`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'rotateX(0) rotateY(0)';
});※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
マウス位置に応じてカードが3次元的に傾く。平面に見える要素に空間性を与え、視線が触れた場所を立体的に応答させる。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ナビゲーション・リンク・サムネイル・カードなど、マウスを乗せた要素のフィードバックに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。