CSSでトランスフォームを使う方法

CSS のtransformプロパティは、移動、拡大縮小、回転、傾斜などの要素の幾何学的変換を実行するために使用されます。その使用法には以下が含まれます。 変換:translateX(x)/translateY(y)/translate(x, y) スケーリング:scaleX(x)/scaleY(y)/scale(x, y) 回転:rotate(angle)/rotateX(angle) )/rotateY(角度)/rotateZ(角度) skew: skewX(角度)/skewY(角度)

CSS での変換の使用

transform プロパティは、CSS の要素に対して、移動、拡大縮小、回転、傾斜などの幾何学的変換を実行するために使用されます。アニメーション、モーフィング、ディストーションなどのさまざまな視覚効果を作成するための強力な機能を提供します。

使用法

transform 属性の構文は次のとおりです。

<code class="css">transform: <transform-function> [<transform-function>]...;</code>

このうち、<transform-function> 次の変換関数のいずれかを指定できます:

• translateX(x): x 軸に沿って要素を移動します。
• translateY(y ): 要素を y 軸に沿って移動します
• translate(x, y): 要素を x 軸と y 軸に沿って移動します
• scaleX(x): x 軸に沿って要素をスケールします
• scaleY(y): y 軸に沿って要素をスケールします
• scale( x, y): x 軸と y 軸に沿って要素をスケールします
• rotate(angle): 要素を角度で回転します
• rotateX (angle): x 軸に沿って要素を回転します
• rotateY( angle): y 軸に沿って要素を回転します
• rotateZ (angle): Z 軸に沿って要素を回転します
• skewX(angle): x 軸に沿って要素を傾けます
• skewY( angle): y 軸に沿って要素を傾ける

複数の変換

transform 属性は、スペースで区切って複数の変換関数を組み合わせることができます。 ##

<code class="css">transform: translate(50px, 100px) rotate(45deg) scale(2);</code>

結合単位

変換値には、ピクセル (px)、パーセンテージ (%)、またはその他の CSS 単位を含めることができます。

要素に適用する

transform 属性は任意の HTML 要素に適用できますが、通常はアニメーションや視覚効果を作成するために使用されます。例:

メニュー項目を回転する
• ボタンを拡大縮小してインタラクションを示す
• ユーザー入力に応じて要素を移動する
• 画像をモーフィングして独自の効果を作成する

Note

transform 属性は、コンテンツ ボックスではなく、要素のレイアウト ボックスに影響します。
• transform 属性は最新のブラウザで広くサポートされていますが、古いブラウザではベンダー プレフィックスが必要な場合があります。

以上がCSSでトランスフォームを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。