CSS3 の transition、transform、translate の違いと機能の簡単な分析

変換して翻訳する

Transform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS3 属性です。

translate は transform の属性値であり、要素が 2D で変換されることを意味します。2D 変換とは、要素が現在の位置 (0,0) から x 軸方向および y 軸方向に移動することを意味します。

例えば：

transform: translate(0,100%) は、要素を現在の位置から y 軸に沿って、要素の高さ全体分下方向に移動することを意味します。

transform: translate(-20px,0) は、要素の現在の位置から x 軸に沿って左に 20px 移動することを意味します。

transform には、translate3D (3D 変換)、scale (2D スケーリング)、その他の変換方法など、他の多くのプロパティ値があります。

遷移

トランジションは、一定期間内に 1 つの CSS プロパティ セットを別のプロパティ セットに変更するアニメーション プロセスです。動的な効果を実現するために使用できる、CSS3プロパティ

構文 transition: 変換するプロパティ 変換に必要な時間 アニメーションの速度を制御する Change アニメーションの実行が開始されるまでの遅延時間

遷移プロパティは、アニメーションが開始する前の要素の外観を定義するスタイルである終了スタイルではなく、初期スタイルで記述されます。要素にトランジションを一度設定するだけで、ブラウザが 1 つのスタイルから別のスタイルへのアニメーション化を処理します。

例えば：

トランジション:幅 2s;

遷移:2秒を移動します。

遷移: すべて 2。

要約する

CSS3 の transition、transform、translate の違いと機能についての記事はこれで終わりです。CSS3 の transition、transform、translate に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。