CSS3_02

1. 変換属性: 変換: 値: 変換関数 (変換関数);

2. 変換原点: デフォルト要素の中心; 変換原点: 値: 数値/パーセンテージ/キーワード;

3. 2D 変換: 属性: 変換: 値: ① ディスプレイスメント: 正方向に移動;) ② スケール: スケール (値)/スケール (x)/スケール Y (y);スケーリング機能、0~1 で縮小、>1 で拡大;); ③ 回転: 回転 (n 度) (* n は時計回り、回転後に座標軸が変わります;);度)/スキュー X (x 度)/スキュー Y (y 度);

4. 3D 変換の親属性: パースペクティブ: 値: px; (* 子要素が 3D パースペクティブ効果を得るために、親要素と空間要素に作用する、人間の目から投影面までの距離) ;

5. 3D 変換: 属性: 変換: 値: ①3D 回転: a. 回転 X (x 度)/回転 Y (y 度)/回転 Z (z 度) b. ); (* x, y, z の値は 0 または 1;); ② 3D ディスプレイスメント: 変換 Z (z)/translate3d (x, y, z); ③ 3D 表示: 変換スタイル: 値: a, flat (デフォルト、2D 形状;); b. prepare-3d (3D 要素状態に変換します;) (* 空間要素に使用されます);

6. 遷移: ①遷移プロパティ:transition-property: 値: プロパティ (CSS プロパティ名、複数のカンマ区切り;); ②遷移時間:transition-duration: 値: s/ms; ③遷移時間速度曲線関数:transition-タイミング関数: 値: a、イーズ (デフォルト、遅い、速い;); b、リニア (均一な速度;); d、イーズアウト (速い、遅い;); ; e. イーズインアウト (ゆっくり、速く、ゆっくり;); ④ 遷移遅延時間: 遷移遅延: 値: s/ms

7. アニメーション: ①アニメーションを宣言: @keyframes name { 0%{アニメーション開始のステータス}...50%{}...100%{アニメーション終了のステータス}} (* 互換性: @-webkit-keyframes name{ }); ② アニメーションの呼び出し: a. アニメーションの実行期間属性: anime-timing-function:; :animation-lay:; アニメーションの再生回数: anime-iteration-count: 値: 数値/無限(無限回) e. アニメーションの再生方向: アニメーションの方向: 値: 通常(順方向)/逆方向(逆方向) /代替 (奇数、正、偶数逆); ③ アニメーション合成: アニメーション: 名前 継続時間 タイミング関数遅延 反復回数方向 ④ アニメーション再生前後のフィル ステータス: アニメーションフィルモード: 値: none/forwards完了後) 1 つの状態) / 逆方向 (遅延時間は最初の状態のまま) / 両方; ⑤アニメーションの再生状態: anime-play-state: 値: 一時停止 (一時停止) / 実行中 (再生);