Transformプロパティを使用して、要素を回転、スケーリング、翻訳し、ゆがんでいますか？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Transformプロパティを使用して、要素を回転、スケーリング、翻訳し、ゆがんでいますか？

James Robert Taylor

Mar 20, 2025 pm 03:41 PM

Transformプロパティを使用して、要素を回転、スケーリング、翻訳し、ゆがんでいますか？

CSSのtransformプロパティは、通常のドキュメントフローを破壊することなく、要素の視覚的な外観を変更するために使用される強力なツールです。さまざまな種類の変換に使用する方法は次のとおりです。

回転：
rotate関数を使用すると、固定点の周りに要素を回転させることができます（デフォルトでは、要素の中心）。程度、卒業生、ラジアン、またはターンで回転角を指定します。例えば：
```
 <code class="css">transform: rotate(45deg);</code>
```
これにより、要素は45度を中心の周りに時計回りに回転させます。
規模：
scale関数は、要素のサイズを変更します。 1つまたは2つの値を取ることができます。 1つの値は水平方向と垂直の両方でスケーリングしますが、2つの値は水平および垂直にスケーリングします。例えば：
```
 <code class="css">transform: scale(2, 0.5);</code>
```
これにより、要素が2倍の幅と半分の高さになります。
翻訳する：
translate関数は、現在の位置から要素を移動します。それぞれ水平および垂直の動きに2つの値をとることができます。または、水平動きのみにのみ単一の値をとることができます。例えば：
```
 <code class="css">transform: translate(50px, 100px);</code>
```
これにより、要素が50ピクセルを右に移動し、100ピクセルを下に移動します。
スキュー：
skew関数は、x軸とy軸に沿って要素を歪めます。 translateと同様に、1つまたは2つの値を取ることができ、それぞれ水平および垂直のスキューに影響します。例えば：
```
 <code class="css">transform: skew(30deg, 20deg);</code>
```
これにより、X軸に沿って30度、Y軸に沿って20度の要素を歪めます。

CSSのスケーリングとスケーリングに変換に変換を使用することとの違いは何ですか？

回転とスケーリングにtransformを使用するには、異なる変換が含まれ、要素に明確な影響を及ぼします。

回転は、レイアウト内のサイズや位置を変更することなく、要素の方向に影響します。ポイントの周りの要素を回転させ、 transform-originプロパティを使用して変更できます。回転は、要素がピボットポイントを回転させるアニメーションまたはエフェクトを作成するのに役立ちます。
一方、スケーリングは、要素のサイズを変更します。翻訳と組み合わされない限り、ドキュメントフロー内の位置に影響を与えることなく、両方またはいずれかの次元の要素を拡張または縮小できます。スケーリングは、レイアウトの影響を変更することなく、ズームエフェクトやサイズの要素のサイズを変更するのに役立ちます。

両方の変換をスムーズにアニメーション化することができ、複雑な効果を生み出すために頻繁に組み合わせて使用されます。

単一のCSSルールで複数の変換関数を結合する方法を説明できますか？

単一のCSSルールで複数の変換関数を組み合わせることは簡単ですが、各関数が順番に適用されるため、理解することが重要な特定の順序に従います。運用の順序は次のとおりです。

マトリックス
翻訳する
規模
回転します
スキュー

たとえば、要素を元のサイズに2倍にスケーリングし、45度回転させ、最後に100ピクセル下に移動します。

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

このシーケンスは、スケーリングの前に要素を回転させると、スケーリングされた寸法に回転角が適用され、潜在的に異なる視覚的結果につながるためです。

Transformプロパティを使用する際に考慮すべきブラウザの互換性の問題は何ですか？

transformプロパティを使用する場合は、次のブラウザの互換性の問題を検討してください。

古いブラウザ： CSS3の一部であるtransformプロパティは、ブラウザの古いバージョンではサポートされていない場合があります。たとえば、Internet Explorerは、バージョン9からのtransformをサポートしますが、異なる構文（ -ms-transform ）を使用します。古いバージョンの場合、代替方法またはフォールバックを使用する必要がある場合があります。
ベンダープレフィックス：さまざまなブラウザー、特に古いバージョンとの互換性を確保するには、 -webkit- -、 -moz- 、 -o- 、および-ms-などのベンダープレフィックスを使用する必要があります。例えば：
```
 <code class="css">transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);</code>
```
3D変換：一部のブラウザには、3D変換、特に古いモバイルブラウザーに問題がある場合があります。ターゲットデバイスとブラウザ全体でテストすることが重要です。
パフォーマンス：ハードウェアの加速は、 transformプロパティによってトリガーされる可能性があります。これは、一部のデバイスでのパフォーマンスに有益ですが、特に複雑なアニメーションや多数の要素を扱う場合、他のデバイスでは問題や矛盾を引き起こす可能性があります。