CSS 変形プレイグラウンド
6つの範囲付き数値コントロールで同じ CSS transform 宣言をローカル表示・コピーします。
CSS 変形プレイグラウンド
移動 −500〜500 px、回転 −360〜360 度、均等倍率 0〜5、両傾斜 −80〜80 度です。空欄でない有限数を入力し、小数も使えます。倍率0でカードは潰れます。無効入力はカードを隠し、古い CSS を消してコピーを無効にします。
宣言順序は translate、rotate、scale、skewX、skewY です。CSS の合成では点に対して右端の関数が先に作用します。原点は 100 × 100 CSS ピクセルのカード中心です。別の数学図は計算しません。 ブラウザーが有限の領域に二次元 CSS を描画し、領域外は切り取ります。三次元変形、遠近法、関数並べ替え、物理測定はありません。入力は送信しません。
使い方
使い方
- 水平・垂直移動、回転、均等拡大縮小、水平・垂直傾斜を設定します。
- 二次元プレビューと CSS 宣言を確認します。
- 宣言をコピーするか、全コントロールをリセットします。
固定の宣言順序
宣言順序は translate、rotate、scale、skewX、skewY です。CSS の合成では点に対して右端の関数が先に作用します。原点は 100 × 100 CSS ピクセルのカード中心です。別の数学図は計算しません。
有限値の範囲
移動 −500〜500 px、回転 −360〜360 度、均等倍率 0〜5、両傾斜 −80〜80 度です。空欄でない有限数を入力し、小数も使えます。倍率0でカードは潰れます。無効入力はカードを隠し、古い CSS を消してコピーを無効にします。
プレビュー範囲
ブラウザーが有限の領域に二次元 CSS を描画し、領域外は切り取ります。三次元変形、遠近法、関数並べ替え、物理測定はありません。入力は送信しません。
よくある質問
あわせて知りたいこと
関数を並べ替えられますか？
いいえ。宣言順序は固定で、プレビューとコピーする CSS は同じ順序です。
カードが消えるのはなぜですか？
倍率0で潰れる、大きな変形で領域外に移動する、または無効入力で隠れます。