CSS Transform ジェネレーター
translate·rotate·scale·skewのスライダーを動かすとプレビューボックスが即時に変換されます。3DモードをオンにするとperspectiveとrotateX·Yまで一度に扱えます。
JiniTools
transform-origin
CSS
使い方
1
値を調整
各スライダーを動かすとプレビューボックスが即時に変換されます。各変換ごとに「リセット」ボタンがあり既定値に素早く戻せます。
2
transform-origin設定
回転·拡大の軸となる中心点をX%·Y%で調整。50% 50%(中央)が既定で、左上(0% 0%)·右下(100% 100%)など自由に変更可能。
3
3D変換 (任意)
「3Dモード」をオンにするとperspective(px)とrotateX·rotateY·translateZが追加されます。名刺の裏返し·カード展開のような立体効果に。
よくある質問
transformとposition translateの違いは？
transform: translateはGPUアクセラレーションでスムーズ、position: absoluteのleft/topは毎回レイアウト再計算が必要。アニメーションはtransformが断然軽い。
rotateの単位はdeg·turn·radどれが良い？
本ツールはdeg(度)で出力します。最も直感的で互換性も最良。turn(1turn = 360deg)、rad(2π rad = 360deg)も同様に動作。
scaleを負数にすると？
負のscaleは「反転」です。scaleX(-1)は左右反転、scaleY(-1)は上下反転。本ツールはスライダー範囲で負数も許容します。
3D変換が見えない
3D効果を見るには親要素にperspectiveが適用されている必要があります。本ツールはperspectiveをプレビュー「ステージ」に直接適用し、子ボックスに立体感が見えるよう処理されています。
サーバーに送信されますか？
いいえ。すべての処理はブラウザ内で行われ、生成されたCSSが外部に送信されることはありません。
