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

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 をよろしくお願いいたします。

<<:  ページ内にマーキーとフラッシュが共存する場合の競合解決

>>:  Vueは小さなメモ帳機能を実装しました

推薦する

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

React ページ ターナーの実装 (フロント エンドとバックエンドを含む)

目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...

経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...

2 つの Linux サーバー間の自動ファイル同期

サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....

Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法

目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...

$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明

要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...

Filebeat を使用して Nginx ログを収集する方法

Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...

HTML でフロートをクリアする 2 つの方法

1. クリアフローティング法1前の親要素の高さを設定します。注: エンタープライズ開発では、可能であ...

MySQL データベースを最適化する 8 つの方法の詳細な説明 (必読の定番)

導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

MySQL トリガーの使用方法と利点と欠点の紹介

目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...

MySQL 起動時に報告される ERROR:2002 の分析と解決方法

序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...

Webpack での publicPath の使用法の詳細な説明

目次出力出力パス出力.publicPath webpack-dev-server の publicP...

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...