CSS Transform Generator

CSS Transform Generator は、CSS transform プロパティのビジュアル エディタです。トランスフォーム機能 (translate、rotate、scale、skew、および 3D 関数 rotateX、rotateY、perspective) ごとにスライダーを移動し、エフェクトがプレビュー要素に適用されるのをリアルタイムで監視し、生成された正確な CSS をコピーします。また、transform-origin、つまり回転ごとにアンカー ポイントを設定し、軸を軸に回転することもできます。

transform プロパティは、周囲のレイアウトを乱すことなく要素を再配置して再形成します。 translated、rotated、または scaled 要素は依然としてフロー内の元のボックスを占めるため、隣接する要素は移動しません。これにより、transform はホバー効果、入口アニメーション、およびリフローをトリガーすべきではない動きの正しいツールになります。 1 つの宣言にいくつかの関数をリストすることができ、それらは要素の座標空間で右から左に適用されるため、順序は純粋に結果を変更します。 translate は次に rotate を移動し、次にその場で回転させます。一方、rotate は最初に軸を回転させ、要素を角度をつけて送信します。

すべてはブラウザで行われます。 「成長」、「回転」、「反転」、または「3D カード」などのプリセットから開始し、各機能を微調整し、宣言をコピーします。ツールは実際に変更した機能のみを書き込むため、冗長スケール (1) や回転 (0deg) を出荷することはありません。アカウントもアップロードもせず、ページがロードされるとオフラインで動作し続けます。

2 つのディテールは実際のデバッグ時間を節約します。 まず、3D 回転は、パースペクティブが存在する場合にのみ 3 次元に見えます。 - このツールがそれを発行するため、同じ変換で最初にパースペクティブ()関数を使用するか、親にパースペクティブ プロパティを使用するか - それ以外の場合は、単に要素を平らに押しつぶします。 2 番目に、何もない以外の変換を持つ要素は、その固定された絶対的に配置された子孫の包含ブロックになり、フィルター プロパティとまったく同じように、新しいスタッキング コンテキストを作成します。位置: 変換された親内の固定された子は、ビューポートではなくその親に固定され、以前に機能した z インデックス順序付けが変更される可能性があります。変換が、見た目とは何の関係もない方法でレイアウトを破ると、ほとんどの場合、その包含ブロックの動作が原因となります。