CSS 3D変換ジェネレーター
スライダーで3Dカード・キューブを作りCSSをコピー
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
回転(X/Y/Z)、遠近感、移動、拡大縮小のスライダーを動かしながら、3Dカードやキューブの効果をリアルタイムでプレビューできるツールです。Web制作者やフロントエンドエンジニアがホバーカードや立体キューブアニメーションを作る際、数値を手探りで決めるのではなく目で確認しながら調整できます。すべての処理はブラウザ内で完結し、サーバーへの送信はありません。
使い方
- 3Dカードまたは3Dキューブのモードを選びます。
- Rotate X/Y/Z、遠近感、Translate Z、拡大縮小のスライダーを動かしてプレビューを確認します。
- 気に入った見た目になったら、下部のコピーボタンで生成されたCSSを取得します。
- 値が崩れた場合は初期化ボタンでデフォルトに戻せます。
よくある質問
- perspective(遠近感)の値はなぜ重要ですか?
- 遠近感が指定されていないと回転しても立体感が出ません。値が小さいほど歪みが強くなり、大きいほど平坦に近づきます。
- 生成されたCSSはそのまま使えますか?
- はい。コピーされるコードにはtransform、transform-style、transitionが含まれているので、対応するクラス名に適用するだけで使えます。