CSS3での2D変換
2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。
次の表には、2D変換で使用される一般的な値が含まれています
S.No | 値と説明 |
---|---|
1 | matrix(n、n、n、n、n、n) 6つの値を持つ行列変換を定義するために使用されます |
2 | translate(x、y) x軸とy軸とともに要素を変換するために使用されます |
3 | translateX(n) x軸とともに要素を変換するために使用されます |
4 | translateY(n) y軸とともに要素を変換するために使用されます |
5 | scale(x、y) 要素の幅と高さを変更するために使用されます |
6 | scaleX(n) 要素の幅を変更するために使用されます |
7 | scaleY(n) 要素の高さを変更するために使用されます |
8 | |
9 | skiwX(angle) x軸とともにスキュー変換を定義するために使用されます |
10 | skiwY(angle) y軸に沿ってスキュー変換を定義するために使用されます |
-
CSS3を使用した要素の2D変換
2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix(n、n、n、n、n、n) 6つの値を持つ行列変換を定義するために使用されます 2 translate(x、y) x軸とy軸とともに要素を変換するために使用されます 3 translateX(n) x軸とともに要素を変換するために使用されます 4 translateY(n) y軸とともに要素を変換するために使用されます 5 scale(x、y) 要
-
CSS3でのキーフレームの定義
CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームは、CSS3の中間アニメーションステップを制御します。 以下は、CSS3でキーフレームを定義するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 100px; &n