CSS 3Dトランスフォーム ジェネレーター
スライダーで3Dカードやキューブを作り、CSSコードをそのままコピーできます
回転(X/Y/Z)、パース(遠近感)、移動、サイズのスライダーを動かしながら、3Dカードやキューブの効果をリアルタイムプレビューで確認できるツールです。Webコーダーやフロントエンドエンジニアが、カードのホバー効果や立体的なキューブアニメーションを作るとき、値を勘で探さずに目で見ながら調整できます。計算とプレビューはすべてブラウザ内で処理されるため、サーバーへ送信されるデータはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 3Dカードまたは3Dキューブのモードを選びます。
- Rotate X/Y/Z、perspective、Translate Z、スケールのスライダーを調整し、プレビューの変化を確認します。
- 思いどおりの形になったら、下部に生成されたCSSコードをコピーボタンで取得します。
- 値が崩れてしまったときは、リセットボタンで初期値に戻せます。
よくある質問
- perspectiveの値はなぜ重要なのですか?
- perspectiveを指定して初めて、回転したときに立体感(遠近によるゆがみ)が生まれます。値が小さいほどゆがみが強くなり、大きいほど平面に近づきます。
- 生成されたCSSはそのまま使えますか?
- はい。コピーしたCSSにはtransform、transform-style、transitionのプロパティが含まれているので、クラス名を合わせればすぐに適用できます。
- 3D変換アニメーションがカクつかないようにするには、何に注意すればいいですか?
- transformプロパティはGPUアクセラレーションが効くため基本的には滑らかに描画されますが、親要素にoverflow: hiddenが設定されていなかったり、backface-visibilityの設定が抜けていたりすると、カードの裏面が透けて見えたりカクついたりすることがあります。また、あまりに多くの要素に同時に3D効果を適用すると、低スペック端末でフレームレートが落ちる場合があるため、本当に必要な要素だけに絞って適用するのがおすすめです。