css3のtransform属性の詳しい説明とtransformの使い方のまとめ

HTML5とCSS3は近年急速に発展しており、最新のテクノロジーを使用した大きくてクールなWebサイトが数多くあり、さまざまなメーカーのブラウザがそれらに対応するようになってきています。 CSS3 には強力なプロパティ Transform があります。この機能を使用すると、さまざまな特殊効果を簡単に実現できます。歌詞を引用すると、「回って、跳ねて、止まらない」。文字通りの意味から、Transform は変換を意味することがわかります。その値には主に回転、傾斜、スケール、平行移動、および行列変換行列が含まれます。次のコンテンツでは、CSS3 のこの重要なプロパティについて説明します。

まず、PHP中国語ウェブサイトに関連する無料コースを学ぶことができます

1.「CSS3 3D特殊効果ビデオチュートリアル」を見る属性変換

2.「CSS3を初心者から学ぶ」

CSS3の変換変換

チュートリアル

transform属性

1. CSS3要素の2D平面変換属性transform

CSの実装方法についてS3 の形状変換により、この記事では、主に変換できる 2D 平面の変換属性について説明します。Transform は変換を意味し、主に次の関数で使用されます。 () 回転変換scale( ) スケール変換skew() 斜め変換行列() 行列変換transform-originルールは、変換の中心変換変換を定義します可変幅のdivを実装するためのcss3のtransform属性の詳細な紹介。 、高さ、垂直方向と水平方向のセンタリング

transform 互換性は非常に楽観的です。 IE9 より下では互換性がありません。IE9 は代替の -ms-transform 属性をサポートしますが、2D 変換のみをサポートします。

Google と Safari は、代替の -webkit-transform 属性をサポートしています。 IE9以降、FirefoxおよびOpenと互換性があります。

実際のプロジェクトでは、p の幅と高さの可変、垂直方向と水平方向のセンタリングの問題に必ず遭遇すると思います。以前はjsを使って実装した記憶があります。

実際、これを実現するために CSS を使用する方法がいくつかあります。ただ、個人的にはtransformを使った方が簡単で便利だと思いますが、IE9以下のブラウザには対応していません。

3.

CSS3のtransform、transition、アニメーションプロパティの違いの詳細な例

一部のテストケースでは、transform属性が示されるたびにアニメーション化されるようです。このため、直観的な思考を持つ少数の人は、transform アトリビュートがアニメーション アトリビュートであると考えます。それに対して、transform 属性は静的属性であり、スタイルに書き込むと、変更処理を行わずにその効果が直接表示されます。トランスフォームの主な目的は、要素の特別な変形を行うことです。簡単に言うと、これは CSS グラフィック変形ツールです。

4. css変形transform属性の詳細紹介

transform:変形

rotation:rotate():degree

skew:skew():degree

skewX

skewY

scaling:scale():Positive数値、負の数、小数

scale 2)rotate(50deg); 最初に回転を実行し、次にスケーリングを実行します

5。CSS のtransform属性を使用すると、座標空間を変更できます。 CSSビジュアルモデル。変換により、要素を移動 (平行移動)、回転 (回転)、拡大縮小 (スケール)、および傾斜 (スキュー) することができます。

このプロパティに none 以外の値が設定されている場合、スタッキング コンテキストが生成され、そのオブジェクトは、そのオブジェクトに含まれる固定要素を含むブロックとして機能します。

6.

CSS3 変換の HTML ドキュメント フローへの影響

transform 属性を body (または html) に追加すると、本文 DOM 全体が対応する変換を受けますが、この時点での「全体」とは、本文の下にある標準のドキュメント フロー要素のみを指します。 : 修正済み; 要素がボディが属するドキュメント フローから分離されているため、ボディの変形に依存して対応する変形効果を自然に実現することはできません。

関連する質問と回答

1. transform スクロール効果を作成するにはなぜ 2 つの要素が必要ですか?

2. トランジション トランスフォームの初期表示: ブロックなぜ移動がありませんか?効果？

3. CSS3 変換はどのようにして中心回転を実現できますか?

【関連おすすめ】

1. PHP 中国語 Web サイトの無料ビデオ チュートリアル: 「php.cn Dugu Jiijian (2) - CSS ビデオ チュートリアル」

2. PHP 中国語 Web サイトの無料ビデオ チュートリアル: css3 実装 Web ページスムーズトランジションエフェクトのビデオチュートリアル

以上がcss3のtransform属性の詳しい説明とtransformの使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。