CSS3 で translate と transition を使用する方法

CSS3 で translate と transition を使用する方法

translate と transition は非常に強力で、習得するのは不可能だといつも感じています。実際、理解する気が起きません。インターフェースのドキュメントを 30 分もかからずに読み、大まかな理解が得られました。以下は例です。ダウンロードして自分で実行できます。

<!DOCTYPE html>
<html>
<ヘッド>
  <title>翻訳と移行</title>
</head>
<本文>
<スタイル タイプ="text/css">
  div {
    幅: 100ピクセル;
    高さ: 75px;
    背景色: 赤;
    境界線: 1px 黒一色;
  }

  div#翻訳{
    遷移: すべて 2;
    -ms-transition: すべて 2 秒;
    -webkit-transition: すべて 2;
  }

  div#translate:hover{
    変換: translate(50px, 100px);
    -ms-transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
  }
</スタイル>
<div>こんにちは、これは Div 要素です</div>
<div id='translate'>こんにちは、これは別の Div 要素です</div>
</本文>
</html>

デモについては、ここをクリックしてください[/css3/translate.html]

translate(a, b): 正式には 2D 転送と呼ばれ、実際には平面上の x 軸と y 軸の移動です。これほど多くの用語を使用する理由は、私たちが十分な教育を受けておらず、簡単に理解してほしくないからです。
a - 水平方向(左右)に、つまり x 軸上で単位距離を移動します。たとえば、10 ピクセルの場合は 10 ピクセル移動します。正の値は右に移動し、負の値は左に移動します。 b - 垂直方向(上下)に、つまり y 軸上で b 単位距離を移動します。たとえば、50 ピクセルの場合は 10 ピクセル移動します。正の値は下に移動し、負の値は上に移動します。

開始点は左上隅ですが、要素位置を最初に原点以外の点に設定すると、要素単位で計算が行われるという別の問題があります。

原点 (0,0) ----------
|
|
|

トランジションアニメーション トランジション

遷移: プロパティ 期間 タイミング関数 遅延

プロパティ - CSS プロパティ

継続時間 - アニメーションの実行期間。0 の場合、アニメーションは実行されません。

デフォルトのタイミング関数アニメーション実行モードはeaseです

delay - アニメーション遅延実行時間デフォルトは0

これら4つは属性です。他の属性は書いていないと思います。詳細はドキュメント[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]を参照してください。

要約する

CSS3 の translate と transition の使い方に関するこの記事はこれで終わりです。CSS3 translate transition の使い方の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ウェブページでメモの詳細が灰色になる問題に対処する

>>:  vue v-for ループ オブジェクトの属性

推薦する

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

HTMLテキストオーバーフローの2つの一般的な解決策は省略記号を表示することです

方法1: CSSオーバーフロー省略を使用して解決する解決策は次のとおりです。 CSSコード: ディス...

Vueスロットの実装原理についての簡単な説明

目次1. サンプルコード2. 現象を通して本質を見抜く3. 実施原則4. 親コンポーネントのコンパイ...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...

Dockerでパラメータ変数を外部から指定する方法

この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...

MySQLでよく使われる演算子と関数の概要

まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

JavaScript における継承の 3 つの方法

継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...

Linux ターミナルでドメイン IP アドレスを見つけるコマンド (5 つの方法)

このチュートリアルでは、Linux ターミナルでドメイン名またはコンピューター名の IP アドレスを...

CSS導入方法4つのまとめ(共有)

1. インライン参照:ラベルに直接使用されるが、メンテナンスコストが高い スタイル='フォ...

LeetCode の SQL 実装 (182. 重複するメールボックス)

[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...

Mysql の遅いクエリ操作の概要

MySQL の遅いクエリの説明MySQL スロー クエリ ログは、MySQL が提供するログ レコー...

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...