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は小さなメモ帳機能を実装しました

推薦する

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...

React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド

目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...

mysql8.0.11クライアントがログインできない問題の解決方法

この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...

VMware のインストールと使用時の問題と解決策

仮想マシンは使用中であるか、接続できません次のようなエラーが報告された場合解決まずこのページにアクセ...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

WEBAPP開発スキルのまとめ(モバイルWebサイト開発の注意点)

1. レスポンシブな Web を開発するには、ページを画面サイズに適応させる必要があります。前の記...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ

1. 角を丸くする今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 ...

Tomcat サービスに Java 起動コマンドを追加する方法

私の最初のサーバープログラム現在、オンラインゲームの書き方を学んでいるので、サーバーサイドのプログラ...

Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析

質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)

今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。...

Linux CRM デプロイメント コードの詳細な説明

Linuxの基本設定 Linux環境でpython3をコンパイルしてインストールする 1. Linu...

Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...