初めて a rotateY 私は確信していた画面にカードを傾けるだけで、代わりに平らに押しつぶした、私は理由を理解する前に午後の良い部分を失った 遠近感がなかった 私は回転を書いていたが、回転を奥行きとして読み取る1 つの関数は書いていなかった、そしてCSSは私がそれを言ったことを正確にやった 私が今変換を構築する理由の全体は、その午後は、値を入力する代わりに、スライダーをドラッグしてボックスの応答を見て、保存、リフレッシュ、目を細める。
Css transform プロパティは言語の中で最も便利なものの1 つであり、微妙に間違えるのが最も簡単なものの1 つです。 要素を動かし、回転させ、スケーリングし、周囲のものを乱すことなく歪めます。そのため、すべてのホバリング効果、すべてのカードリフト、すべての入り口アニメーションがそれに傾きます。しかし、それは多くの動作を短い文字列に詰め込み、関数の順序によって結果が変わり、3D 関数は、ヒットするまで目に見えない依存関係を持ちます。構築されているのが見える値は、想像するよりもはるかに価値があります。
ザ・ CSS Transform Generator すべての関数に対してスライダーを与え、translate、rotate、scale、skew と rotateX、rotateY と perspective の 3D トリオを変換し、各変更をライブ プレビュー要素に適用しながら作成します。また、transform-origin、つまり回転とスケーリングが中心となるアンカー ポイントを設定することもできます。正確な宣言は、触れた関数のみを含む、下のコピー準備完了ボックスに置かれます。
tl;dr: Css
transformプロパティは、ページレイアウトに影響を与えることなく要素を再配置および再形成します。 、それがホバーエフェクトやアニメーションのための右ツールである理由です。 関数は右から左に適用されるので、順序は重要です; 3D回転にはが必要ですperspective()3 次元に見えるように; そして、任意の変換された要素はその固定および絶対子のための包含ブロックになります このジェネレータは、ライブプレビューですべての関数を公開し、変更した関数のみを放出し、スタイルシートに直接貼り付けることができるクリーンなCSSを生成します サインアップなしでブラウザで完全に実行されます。
CSS変換ジェネレーターはどのような問題を解決しますか?
ザ・ transform プロパティは、cssグリッドが抽象的であるのと同じように抽象的です。ピクセルを直接移動しているわけではありません。幾何学的演算を記述し、ブラウザに結果を計算させます。 translateX(40px) rotate(15deg) scale(1.1) は正確な命令だが、テキストのみからこれら3 つを連鎖させた結果を感じる方法はない。 をレンダリングしなければならない。 と、自分のプロジェクトでレンダリングすると、write-save-refresh ループを意味し、これは十分に遅いため、ほとんどの人は、望む値が見つかるずっと前に実験をやめる。
発電機は何もないループになる折りたたみます回転スライダーをドラッグするとボックスはリアルタイムで回転しますスケールを上げると中心から大きくなります翻訳を追加すると回転を維持しながらスライドしますこの10分と数字と動きの関係は頭の中で翻訳するものではなくなり感じるものになります終わったら書き写すものは何もありませんなぜなら作業中のCSSはずっとあなたのために書かれているからです。
見た目よりも重要な2 番目の利点があります 操作によって変換を構築することは、ツールがこれまで有効で整ったCSSのみを発することができることを意味します 壊れたものを生成することはできません transform スライダーをドラッグして値を設定することで、出力を常に安全に貼り付けることができます。その信頼性が、私がビジュアル CSS ビルダーの棚を近くに保つ理由であり、私がそのために手を伸ばすのと同じ理由です box-shadow generator 手でシャドウオフセットを数えるのではなく.
なぜ変換関数の順序が重要なのでしょうか?
これは最も人をつまずかせる 単一の詳細です 動き回るよりも理解する価値があります 1つにいくつかの関数を列挙すると transform、ブラウザはそれらを右から左に適用し、それぞれが前のによって残された座標空間で動作します。つまり、要素が最終的に到達する順序が真に変化します。
取る translateX(100px) rotate(45deg) 対 rotate(45deg) translateX(100px). 1 つ目では要素が百ピクセル平行移動してからその場で回転するので右に百ピクセル座り四十五度回転します.2 つ目では回転が先に起こり,これは要素& #39; s座標軸を回転させ,そして平行移動はそれに沿って百ピクセル移動します. 回転 X軸、斜め下と右に送ります。同じ 2 つの関数、同じ 2 つの値、まったく異なる位置。
ジェネレーターは意図的な順序でその関数を発します、まず視点、次に翻訳、次に回転、次にスケール、そしてスキュー、これは一般的なケースを直感的に動作させ続ける賢明なデフォルトですが、順序が意味のあるものであることを理解すると、ある場所から別の場所への変換をコピーすると、予期しなかった結果が生じる理由も理解できます。文字列は移動しましたが、その背後にあるメンタル モデルは移動しませんでした。自分で構築し、各関数 & #39; の貢献を確認することで、そのモデルがどのように構築されるかです。
3Dトランスフォームを3Dに見せるにはどうすればよいですか?
その日の午後に犠牲になった罠はここにあります。関数 rotateX あんど rotateY 要素を水平軸と垂直軸の周りに回すと、ページをめくるように要素を自分に向かって、または自分から遠ざけるように傾ける必要があります。しかし、デフォルトではシーンに深みがないため、回転は画面の平面上に真っ直ぐ投影され、要素は単に圧縮されているように見えます。 A rotateY(60deg) 透視図法がないと、要素が曲がったのではなく、狭くなったように見えます。
欠けている成分は perspective、そしてそれを供給する方法は2 つあります。 を置くことができます perspective 親要素上のプロパティ。すべての 3D 子に対して共有消失点を確立するか、a を追加できます perspective() 要素's の開始時に機能します transform、その1 つの要素にそれ自身の深さを与える このジェネレータは2 番目のアプローチ: パースペクティブスライダを設定し、それを発します perspective() 最初にチェーンの、正確にそれがある必要がある場所. smaller 値, somewhere between three hundred and six hundred pixels, place the vanishing point close to the element and make the depth dramatic; larger values flatten the effect towards a gentle tilt.
ツール内の3Dカードプリセットは、これを見るための最速の方法です。 600 ピクセルとaの視点を設定します rotateY 25 度、プレビュー ボックスは画面に説得力を持って入ります。透視スライダーをゼロに戻し、同じ回転が平らなスカッシュに崩壊するのを見てください。その前後が 2 つのドラッグでのレッスン全体です。
トランスフォームオリジンは何をしますか?
すべての回転とすべてのスケールは、回転するために固定点が必要であり、その点は変換起点です。デフォルトでは、要素の死点に位置するため、未変更です rotate 箱を中央と未改造の周りで回転させます scale 一度にあらゆる方向に外側に成長させます 原点を移動すると両方の動作が変化します。
原点を に設定します top left そして回転はスイングとなり、要素はヒンジ付きのサインのようにその左上隅から旋回します。 に設定します bottom そして scaleY 要素を対称的に拡張するのではなく、ベースから上向きに成長させます。これはまさに、グラフの軸から立ち上がるバーに望むものです。ジェネレーターは、中央、4 つのエッジ、4 つの角の 9 つのキーワード位置すべてを提供し、1 つを選択した瞬間にプレビューを更新するため、スピンとスイングの差は 1 クリック離れます。
これは、必要になるまでほとんど見えないプロパティの 1 つであり、その後、それがあなたが求めている効果を生み出す唯一のものです。上端から展開する必要があるメニュー、それが属する要素からスケールアップする必要があるツールチップ、中央ではなく角の周りを回転する必要があるカード、それらはすべてトランスフォームオリジンであり、どれもからは明らかではありません transform 価値 単独.
なぜトランスフォームは他の要素を押し回さないのでしょうか?
の最も有用な特性の 1 つ transform また、初めて噛んだときに最も驚くべきことは、人が感じたことです。変換された要素はその周囲のレイアウトに影響を与えません。ボックス 40 ピクセルを右に変換すると、40 ピクセルが右にレンダリングされますが、ドキュメント フロー内の元のスペースはまだ予約されているため、ギャップを埋めるために他のものは移動せず、何も押しのけられません。変換はペイントタイム効果であり、レイアウトがすでに計算された後に適用されます。
これはバグではなく機能であり、まさにそれが transform をアニメーションのための正しいツールにしているのです。 というのも、要素を移動させるのは transform リフローをトリガーしない、ブラウザはGPU上の変更を合成し、アニメーションを60 フレーム1 秒に保つことができます。 で同じ要素を移動します top や left や margin ブラウザにすべてのフレームのレイアウトを再計算させます これはアニメーションの最も一般的な原因で フレームがどもり落ちます スムーズな動きが必要な場合は、アニメーション化します transform あんど opacity、レイアウトプロパティは放っておきます。 reflow に周囲のコンテンツが必要な場合、それは変換ではなくレイアウトの変更が必要なサインであり、 のようなツールです flexbox generator それか、 CSS グリッドジェネレータ は 始める 適地.
なぜ固定された子供が私の変形した要素の中で壊れたのですか?
これは無関係なもののバグのように見えるガッチャで、1 時間かかる前に知っておく価値があります。 仕様書には、a を持つ任意の要素と記載されています transform 以外の値 none が配置されるその子孫のための包含ブロックとなる fixed や absolute、そしてそれはまた新しいスタッキングコンテキストを作る。 それらの両方は変換自体から遠くに表面化する結果を持つ。
封じ込めブロックの変化は人々を驚かせるものです。 A position: fixed 要素はページがスクロールするように put を維持しながらビューポートにアンカーすることになっています。 しかし、その固定要素のいずれかの祖先が変換を持っている場合、固定要素は にアンカーします その先祖 代わりに、突然、あなたの "fixed" ヘッダーがコンテンツとともにスクロールしたり、モーダルがカード内に閉じ込められたりします。 transform's の外観については何もヒントがありません。要素は正常に見え、3 レベル下の何かがそれ自体を誤って配置します。固定要素または絶対要素が閉じ込められたかのように動作する場合、最初に確認すべきことは、祖先が変換を運ぶかどうかです。スタッキング コンテキストの変更は、並列クラスの混乱を引き起こします。 a z-index 変換された要素が子供たちを独自のスタッキング層に密閉したため、以前は突然機能しませんでした。まったく同じ動作が適用されます filter プロパティ、それが理由です CSS フィルター ジェネレーター 同じ警告を伝えます.
発電機はどの機能をカバーし、それぞれの機能はいつ到達しますか?
ツールは一般的な変換関数のフルセットを公開し、ランダムにドラッグするのではなく、それぞれが何のためにあるかを知るのに役立ちます。ここにマップがあります。
| 機能 | それが何をするか | 通常の使用 |
|---|---|---|
translateX / translateY |
軸に沿って要素を移動します | スライドインエントランス、ホバリングナッジ、オフセットポジショニング |
rotate |
要素をその中心の周りに回します (2D) | 傾いたバッジ、回転ローダー、遊び心のあるホバリング角度 |
scale (XとY) を表す |
要素を成長または縮小します | ホバーズーム、ポップエフェクト、プレスダウンフィードバック |
skewX / skewY |
軸に沿って要素を傾けます | ダイナミックバナー、イタリックスタイルの形状、モーションキュー |
rotateX / rotateY |
3D空間で要素を回します | カード反転、パネル傾斜、カバーフロー効果 |
perspective |
深度を追加して、3D回転が正しく読み取られるようにします | 常に rotateX または rotateY とペアリングします |
パートナーを必要とする2 つは、視点なしで説得力のあるものは何もしない3D回転と、それが明らかではないので、それを呼び出す価値がある負のスケールです。 設定 scaleX 負の値にすると、要素がミラーのように水平に反転します。これは、flip Horizontal プリセットの仕組みです。これは、2 番目のアセットをエクスポートするのではなく、アイコンをミラーリングする、真に便利なトリックであり、負の値が許可されるとわかると、スケール コントロールから真っ直ぐ外れてしまいます。
ジェネレータはどのようにプレビューを正直なままにしますか?
任意のビジュアルビルダーの失敗モードは、プレビューが表示するものとエクスポートされたコードが生成するものとの間のドリフトです.そのプレビューをある方法でレンダリングし、そのCSSを別の方法で書き込むツールは、まったくツールなしよりも悪いです, それはあなたに再現しない値を教えますので、このジェネレータは、previewを構築することによってそれを回避します& #39; sインラインスタイルとコピーされた宣言を同じ関数から, だから、あなたが表示するものは文字通りあなたが貼り付けることに反対することができる第二のコードパスはありません。
出力にあなたが変更した関数だけが含まれているのもそのためです。 leaving scale そのアイデンティティにおいて、または rotate ゼロでは、これらの関数は冗長として記述されるのではなく、単に文字列に含まれていないことを意味します scale(1) ノイズ.クリーントランスフォームは一目で読み、信頼できるものであり、意味のある関数だけを放出することは、私が視覚的なCSSツールを介して依存しているのと同じ規律です グラディエントジェネレータ ボックスシャドウビルダーへ より広いキットを組み立てる場合は、 Web 開発者ツールキット 私が最も頻繁に開くものを収集します。それらをうまく使用する背後にある習慣は次のとおりです 開発者の生産性向上ツール ガイド.
CSS 変換をサポートするブラウザは何ですか?
CSS 変換は現在のすべてのブラウザでサポートされており、10 年以上前からサポートされています。 translate、rotate、scale、skew の 2D 関数はユニバーサルで接頭辞が付けられておらず、3D 関数も一緒にサポートされています perspective chrome、firefox、safari、edge でも同様にサポートされています。古い -webkit- あんど -moz- かつて必要だった接頭辞は、今日のスタイルシートでは死重であり、このジェネレーターの出力は標準であり、接頭辞のない CSS は、記述どおりに出荷できます。権威あるルールの場合、W3C の CSS Transforms Module レベル 1 およびレベル 2 仕様が主なソースであり、ジェネレーターがそれらに従う直感を与えたら読む価値があります。
これと並行して、より幅広いビジュアル ツールキットを構築している場合は、 border-radius generator そして、トランジションビルダーは自然な仲間です。ホバー上の変換では、ほとんどの場合、スムーズに移行することが求められます。ここにあるものはすべてクライアント側で実行され、コピーした CSS はランタイム、ビルドステップ、依存関係なしで使用できます。
よくある質問
CSSトランスフォームジェネレータとは何ですか?
CSS 変換ジェネレーターは、選択した設定から CSS 変換値を構築するビジュアル ツールです。 translate、rotate、scale、skew、3D パースペクティブをスライダーで調整し、結果のライブ プレビューとともに変換宣言を出力します。
変換関数の順序は重要ですか?
はい。 要素は要素座標系で右から左に適用されます。 translate then rotate は、rotate then translate と同じではありません。 translating は、まず要素を動かし、次にその場で回転させます。 translating は、最初に軸を回転させるため、後の translate は角度を付けて送信します。
CSS 変換を 3D に見せるにはどうすればよいですか?
3D回転には奥行きとして読み取る遠近法が必要です変換の開始時に遠近法()関数を追加します遠近法スライダーを設定するとこのジェネレーターが発しますまたは親要素に遠近法プロパティを置くと300 から600 ピクセル程度の値で奥行きが最もドラマチックになります。
トランスフォームオリジンは何をしますか?
transform-origin は、transform がピボットしてスケーリングする点を設定します。デフォルトは要素の中心です。それを角に移動すると、回転はその角からスイングになります。それをエッジに移動すると、スケーリングはあらゆる方向の外側ではなく、そのエッジから成長します。
なぜtransformはページ上の他の要素を動かないのですか?
Transform はペイントタイム効果です。 element は新しい位置でレンダリングされますが、レイアウト内の元のボックスを保持しているため、周囲のものは変化しません。 transform がアニメーションに理想的なのはこのためであり、コンテンツをリフローする必要がある場合に余白、位置、またはレイアウト プロパティを使用する理由がここにあります。
なぜ固定子または絶対子が変換された要素内で壊れるのでしょうか?
none 以外の transform を持つ要素は、その固定された絶対的に配置された子孫の containing ブロックになり、新しいスタッキングコンテキストを作成します。 position: fixed 子 その後、ビューポートの代わりに変換された親にアンカーし、z-index の順序付けが変更される可能性があります。 transformed 要素の外側に子供が固定されたままである必要がある場合は、その子を移動します。
上、左、幅、高さの代わりにトランスフォームをアニメーション化する必要がありますか?
はい、スムーズな動きを実現します。 transform と opacity は GPU 上で合成され、レイアウトをトリガーしないため、60fps でアニメーション化されます。 top、left、width または height をアニメーション化すると、ブラウザはすべてのフレームでレイアウトを再計算する必要があり、これがジャンキー アニメーションの通常の原因です。
生成されたトランスフォームCSSは無料で安全に使用できますか?
はい。このツールは完全に無料で、サインアップや使用制限はなく、最新のすべてのブラウザでサポートされている標準の接頭辞なしの CSS を送信します。すべての処理はブラウザで行われるため、アップロードされるものは何もなく、ツールはロードされるとオフラインで動作します。
