3D キューブ回転ローダー
3D キューブ回転ローダーは、立方体が複数の軸で同時に回転する立体感のあるローダーです。CSS のみで実装し、JavaScript は使いません。親要素に perspective を指定して奥行きを作り、子要素に transform-style:preserve-3d を与えたうえで、 @keyframes の r…
解説
3D キューブ回転ローダーは、立方体が複数の軸で同時に回転する立体感のあるローダーです。CSS のみで実装し、JavaScript は使いません。親要素に perspective を指定して奥行きを作り、子要素に transform-style:preserve-3d を与えたうえで、@keyframes の rotateX と rotateY を同時に 0 度から 360 度まで回しています。面には linear-gradient で色を載せ、暗い背景に映えるフューチャリスティックな印象に仕上げています。
向いている用途
- テック系・SaaS プロダクトのローディング
- ダッシュボードやデータ可視化ツールの処理中表示
- 未来的・先進的な世界観を出したい画面
立体感の強さは親の perspective:300px で調整でき、数値を小さくするほど遠近が誇張されます。サイズは .cube-load の幅・高さで、色は linear-gradient の #667eea と #f093fb で変えられます。速度は animation の 2s です。動きが大きく目に付きやすいので、prefers-reduced-motion での停止指定を併記すると配慮が行き届きます。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
立体感をもっと強くしたいです。
.cube-load の perspective:300px の数値を小さくすると遠近感が強調され、立体感が増します。大きくすると平面的になります。
面の色を変えられますか？
子要素の background にある linear-gradient の2色（#667eea と #f093fb）を好きな色に差し替えてください。