CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

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軸に沿ってスキュー変換を定義するために使用されます

  1. 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） 要

  2. CSS3でのキーフレームの定義

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームは、CSS3の中間アニメーションステップを制御します。 以下は、CSS3でキーフレームを定義するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 100px; &n