CSS3 トランジション回転パースペクティブ 2D3D アニメーションおよびその他の効果のサンプルコード

CSS3 ボックスモデル

CSS3 では、ボックスモデルは box-sizing を通じて指定できます。content-box と border-box として指定できる値は 2 つあります。これにより、ボックスサイズの計算方法が変わります。

box-sizing: コンテンツボックスのボックスサイズは幅+パディング+境界線（デフォルト）
box-sizing: border-boxボックスのサイズは幅です (パディングと境界線が幅を超えないことを前提としています)

* {
    マージン: 0;
    パディング: 0;
    ボックスのサイズ: 境界線ボックス;
}

a. CSS3 フィルター

フィルター CSS プロパティは、要素にぼかしや色の変化などのグラフィック効果を適用します。

フィルター: 関数();
例えば：
filter: blur(5px); /*ぼかし処理、数字が大きいほどぼかしが強くなります*/

b. CSS3 calc関数

calc()はCSSプロパティ値を宣言するときにいくつかの計算を実行できます

幅: calc(100%-80px);

c. CSS3 トランジション

遷移アニメーション: 1 つの状態を繰り返し、徐々に別の状態に遷移します

遷移: プロパティが遷移するのにかかる時間と、モーション カーブが開始するタイミング。
多くの場合、/* :hover */ と一緒に使用されます。例:
トランジション: 幅 0.5 秒、高さ 0.5 秒。
/*複数の属性はカンマで区切るか、すべて*/
/**トランジションを行った人は誰でも追加されます**/

属性：幅、高さ、背景、色、内側と外側の余白はすべてOKです。
所要時間: 単位は秒です（単位は必ず記入してください）例: 0.5秒
モーションカーブ: デフォルトはイージー（省略可能）
開始時間: 単位は秒です (単位は必ず記入してください)。遅延トリガー時間を設定できます。デフォルトは 0 秒です (省略可能)

2D変換

変換により、要素の変位、回転、スケーリングなどの効果を実現できます。

移動: 翻訳
回転: 回転
スケーリング: スケール

2D座標系

ここに画像の説明を挿入

1.翻訳する

ページ上の要素の位置を変更します。

//ボックスの位置を移動します。ボックスの外側の余白を特定します。2D 変換移動 transform: translate(x, y);
変換:translateX();
変換:translateY();

2D変換における動きを定義し、X軸とY軸に沿って要素を移動します。
翻訳の最大の利点：他の要素の位置に影響を与えない
translate のパーセンテージ単位は要素自体に対する相対値です: (50%, 50%);
インラインタグには影響しません。

2. 回転: 回転

2D 回転とは、2 次元平面内で要素を時計回りまたは反時計回りに回転させることを指します。

transform:rotate(degrees) //単位: 度

正の角度は時計回り、負の角度は反時計回りです
デフォルトの回転中心は要素の中心です。

3. 中心点変換原点

変換の原点:xy;

次のパラメータ x と y はスペースで区切られていることに注意してください。
XY 変換のデフォルトの中心点は (50% 50%) で、これは center center に相当します。
xy（上、下、左、右、中央）のピクセルまたは位置名詞を設定できます。

4. スケール

変換:スケール(x, y);

xyはカンマで区切られます。transform(i, j): 幅はi倍に拡大され、高さはj倍に拡大されます。パラメータは1つだけ記述され、2番目のパラメータは最初のパラメータと同様に変換の中心点のスケーリングを設定できます。デフォルトのスケーリングは中心点に基づいており、他のボックスに影響を与えません。

5. 2D変換の包括的な記述

a.複数の変換を同時に使用します。形式: transform: translate() rotate() scale() など。

b.順序は変換の効果に影響します（最初に回転すると座標軸の方向が変わります）

c.変位と他の属性が同時に存在する場合は、変位を優先する

CSS3アニメーション

アニメーションは、複数のノードを設定することで、1 つまたは複数のアニメーションを正確に制御できます。複雑なアニメーション効果を実現するためによく使用され、より多くの変化、より高度な制御、連続自動再生などの効果を実現できます。

1. アニメーションの基本的な使い方

まずアニメーションを定義する
アニメーションをもう一度呼び出す

a. キーフレームを使用してアニメーションを定義する（セレクターの定義と同様）

要素に複数のアニメーションを追加するには、アニメーションをコンマで区切ります。

@keyframes アニメーション名 {
    0% {
        幅:100ピクセル;
    }
    100% {
        幅:200px;
    }
}

0%はアニメーションの開始、100%はアニメーションの終了です
スタイルは何度でも変更できます
からとまで、0%と100%に相当
パーセンテージは整数である必要があります
複数の状態変更キーフレームを作成できます

b. アニメーションを使用する要素

div {
    アニメーション: 名前;
    アニメーション期間: 期間:
}

2. アニメーションの共通特性

ここに画像の説明を挿入

3. アニメーションのショートカットプロパティ

アニメーション: アニメーション名、継続時間、モーションカーブ、開始タイミング、再生回数、アニメーションが反対方向かどうか、開始または終了ステータス

アニメーション: 最初の 5 秒は直線、2 秒は無限交互

ショートハンドプロパティにanimation-play-stateが含まれていません
アニメーションを一時停止: animation-play-state: paused; マウスオーバーなどの他の機能と一緒に使用されることが多い
アニメーションをジャンプして戻るのではなく、歩いて戻るようにしたい場合: animation-direction: alternate;
ボックスアニメーションが終了すると、終了位置で停止します: animation-fill-mode: forwards;

スピードカーブの詳細

animation-timing-function: アニメーションの速度曲線を指定します。デフォルトは「ease」です。

ここに画像の説明を挿入

3D変換

3D 変換と 3D 回転
3D変位: translate3d(x,y,z)
3D回転: rotate3d(x,y,z)
視点: 視点
3Dレンダリング: 変換スタイル

1. 変位 translate3d

transform: translateZ(100px); Z軸に沿って移動します（通常はpx単位）。
translateZ(100px) 正は外側への移動、負は内側への移動を意味します
translate3d(x,y,z) は省略できません。指定しない場合は 0 と記入してください。

2. 視点（ピクセル）

視点は観察対象要素の親ボックスに書かれています（近い場合は大きく、遠い場合は小さくなります）

d: 視聴距離、つまり人間の目から画面までの距離です。

z: z 軸、つまり画面からオブジェクトまでの距離です。z 軸が大きいほど (正の値)、表示されるオブジェクトが大きくなります。

ここに画像の説明を挿入

3. 回転する rotate3d

rotate3d は、要素を 3 次元平面内の x 軸、y 軸、z 軸、またはカスタム軸に沿って回転できるようにします。

要素の回転方向:左手の法則

左手の親指はx軸の正の方向を指します
残りの指の曲げ方向は、要素が x 軸に沿って回転する方向です。

ええ

左手の親指はy軸の正の方向を指します
残りの指の曲げ方向は、要素がy軸に沿って回転する方向です（正の値）

transform:rotate3d(x,y,z,deg): 定義された軸に沿って角度degだけ回転します。

xyzは回転軸のベクトルを表し、最後のは回転角度を示します。

4. 3Dレンダリング変換スタイル（重要）

子要素が3D環境を開くかどうかを制御します
transform-style: flat サブ要素はデフォルトでは 3D ステレオ空間を開きません
transform-style: preserve-3d; 子要素は3D立体空間を開きます
コードは親に書き込まれますが、子ボックスに影響します

CSS3 トランジション、回転、パースペクティブ、2D、3D アニメーション、その他の効果のサンプルコードに関するこの記事はこれで終わりです。CSS3 回転、パースペクティブ、2D、3D アニメーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL マルチバージョン同時実行制御 MVCC の詳細な研究

>>: Bootstrap 3.0 学習ノート CSS関連補足