CSS 2D・3D transform ジェネレーター

移動、回転、拡大縮小、傾斜、変形の原点を確認し、必要に応じて遠近感や 3D 変形を加えられます。

X · px Y · px 回転 · deg 拡大・縮小 X 拡大・縮小 Y 傾斜 X · deg 傾斜 Y · deg 変形の基準点 X · % 変形の基準点 Y · %

3D オプション

3D 変形を有効にする

プレビュー

破線は元の位置です。変形の順序で見た目が変わります。出力する CSS はプレビューと同じ順序です。

CSS

このブラウザー内で処理します。アップロードや保存は行いません。

このツールについて

要素を配置したり傾けたりする際に、元の輪郭と比較できます。

デザイン

X・Y の移動、回転、各軸の拡大縮小、傾斜、原点を設定し、元の輪郭と見比べます。3D を有効にすると、遠近感、Z 方向の移動、X・Y 軸の回転も調整できます。transform と transform-origin の両宣言をコピー・保存してください。

プレビューと出力のパラメーターと順序は同じです。変形関数を並べ替えると結果が変わることがあります。負の倍率は反転、ゼロはその軸を押しつぶす設定です。出力は要素のスタイルで、3D モデルやアニメーション一式ではありません。

関数の順番を変えるには、書き出した CSS を手動で編集してください。画面に並べ替え機能はありません。プレビューと出力は同じ固定順序を使い、順序を変えると結果も変わる場合があります。負の倍率は軸を反転し、0 はその軸をつぶします。

CSS transform は描画を変えるだけで、元のレイアウトボックスは移動しません。そのため周囲の要素は元の位置を基準に配置されます。間隔は通常のレイアウト指定で調整し、見た目の変形の中心は transform-origin で設定してください。

してディスカッションに参加してください。

コメントはまだありません。