CSS 2D ట్రాన్స్‌ఫార్మ్

CSS 2D ట్రాన్స్‌ఫార్మ్

CSS మార్గాలు (transforms) మూలకాలను కదలుతుంది, పుంజుకుంచుతుంది, పెంచుతుంది మరియు చేరుకుంచుతుంది.

ఈ మూలకంపై మౌస్ ను తొలగించినప్పుడు 2D మార్గాలను చూడవచ్చు:

2D rotate

ఈ చివరలో, మీరు ఈ క్రింది CSS అంశాలను నేర్చుకుంటారు:

  • transform

బ్రౌజర్ మద్దతు

పట్టికలో అంకితమైన పరామీతులు ఈ అంశాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను సూచిస్తాయి.

అటువంటి అంశం చ్రోమ్ ఐఈ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D ట్రాన్స్‌ఫార్మేషన్ మాథ్యూర్స్

CSS ద్వారా ఉపయోగించవచ్చు: transform అంశం, మీరు ఈ క్రింది 2D మార్గాలను ఉపయోగించవచ్చు:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

సూచన:మీరు తదుపరి చివరలో 3D మార్గాలను నేర్చుకుంటారు.

translate() మార్గం

Translate

translate() ప్రదత్త X మరియు Y పరామీతుల ఆధారంగా మూలకాన్ని కొనసాగించుటకు మార్గం.

ఈ ఉదాహరణలో <div> మూలకంను కుడిముఖంగా 50 పిక్సెల్స్ మరియు కుడిముఖంగా 100 పిక్సెల్స్ చేరుకుంది:

ఉదాహరణ

div {
  transform: translate(50px, 100px);
}

పరీక్షించండి

rotate() మార్గం

Rotate

rotate() ప్రదత్త ప్రాంతాన్ని కుడిమాభిముఖంగా లేదా ఎడమాభిముఖంగా పుంజుకునే మార్గం.

ఈ ఉదాహరణలో <div> మూలకంను కుడిమాభిముఖంగా 20 డిగ్రీలు పుంజుకుంది:

ఉదాహరణ

div {
  transform: rotate(20deg);
}

పరీక్షించండి

ఎడమాభిముఖంగా పుంజుకునే మూలకాన్ని కించిపెట్టుటకు పాటికి ఉపయోగించబడుతుంది.

ఈ ఉదాహరణలో <div> మూలకంను ఎడమాభిముఖంగా 20 డిగ్రీలు పుంజుకుంది:

ఉదాహరణ

div {
  transform: rotate(-20deg);
}

పరీక్షించండి

scale() మార్గం

Scale

scale() మూలకం వెడల్పు మరియు అడవీ వంతులను పెంచుటలేదా తగ్గించుటకు మార్గం (ప్రదత్త వెడల్పు మరియు అడవీ వంతు పరామీతుల ఆధారంగా).

ఈ ఉదాహరణలో <div> మూలకంను అసలు వెడల్పు అడవీ వంతునకు అధికంగా పెంచబడుతుంది మరియు అసలు అడవీ వంతునకు అధికంగా పెంచబడుతుంది:

ఉదాహరణ

div {
  transform: scale(2, 3);
}

పరీక్షించండి

ఈ ఉదాహరణలో <div> మూలకంను అసలు వెడల్పు మరియు అడవీ వంతులను అడవీ వంతునకు అధికంగా తగ్గించబడుతుంది:

ఉదాహరణ

div {
  transform: scale(0.5, 0.5);
}

పరీక్షించండి

scaleX() మార్గం

scaleX() మూలకం వెడల్పును పెంచుటలేదా తగ్గించుటకు మార్గం.

ఈ ఉదాహరణలో <div> మూలకంను అసలు వెడల్పు అడవీ వంతునకు అధికంగా పెంచబడుతుంది:

ఉదాహరణ

div {
  transform: scaleX(2);
}

పరీక్షించండి

ఈ ఉదాహరణలో <div> మూలకంను అసలు వెడల్పు అడవీ వంతునకు కన్నా అధికంగా తగ్గించబడుతుంది:

ఉదాహరణ

div {
  transform: scaleX(0.5);
}

పరీక్షించండి

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把

元素增大到其原始高度的三倍：

ఉదాహరణ

div {
  transform: scaleY(3);
}

పరీక్షించండి

下面的例子把

元素缩减为其原始高度的一半：

ఉదాహరణ

div {
  transform: scaleY(0.5);
}

పరీక్షించండి

skewX() మాథ్యూర్స్

skewX() ఈ మాథ్యూర్స్ కెలెయిలను X అక్షం పై నిర్దేశిత కోణం పై స్కీవ్ చేస్తాయి.

ఈ ఉదాహరణలో <div> కెలెయిలు X అక్షం పై 20 డిగ్రీలు స్కీవ్ చేయబడింది:

ఉదాహరణ

div {
  transform: skewX(20deg);
}

పరీక్షించండి

skewY() మాథ్యూర్స్

skewY() ఈ మాథ్యూర్స్ కెలెయిలను Y అక్షం పై నిర్దేశిత కోణం పై స్కీవ్ చేస్తాయి.

ఈ ఉదాహరణలో <div> కెలెయిలు యెయ్ అక్షం పై 20 డిగ్రీలు స్కీవ్ చేయబడింది:

ఉదాహరణ

div {
  transform: skewY(20deg);
}

పరీక్షించండి

skew() మాథ్యూర్స్

skew() ఈ మాథ్యూర్స్ కెలెయిలను X మరియు Y అక్షాల పై నిర్దేశిత కోణం పై స్కీవ్ చేస్తాయి.

ఈ ఉదాహరణలో <div> కెలెయిలు ఎక్స్ అక్షం పై 20 డిగ్రీలు మరియు యెయ్ అక్షం పై 10 డిగ్రీలు స్కీవ్ చేయబడింది:

ఉదాహరణ

div {
  transform: skew(20deg, 10deg);
}

పరీక్షించండి

రెండవ పరామీతు లేకపోతే, అది కొరకు పోతుంది. కాబట్టి ఈ ఉదాహరణలో <div> కెలెయిలు ఎక్స్ అక్షం పై 20 డిగ్రీలు స్కీవ్ చేయబడింది:

ఉదాహరణ

div {
  transform: skew(20deg);
}

పరీక్షించండి

matrix() మాథ్యూర్స్

Rotate

matrix() మాథ్యూర్స్ మాథ్యూర్స్ అన్ని 2D ట్రాన్స్‌ఫార్మేషన్ మాథ్యూర్స్ మార్చుట కలిపి చేస్తుంది.

matrix() ఈ మాథ్యూర్స్ ఆరు పరామీతులను అంగీకరిస్తుంది, ఇవి మీరు కెలెయిలను చుట్టూ తిరుగుట, స్కేల్ చేయటం, తరలించటం (ట్రాన్స్‌లేషన్) మరియు స్కీవ్ చేయటం చేస్తాయి.

పరామీతులు ఈ కింద ఉన్నాయి: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

ఉదాహరణ

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

పరీక్షించండి

CSS ట్రాన్స్‌ఫార్మేషన్ అటువంటి అంశం

క్రింది పట్టిక అన్ని 2D ట్రాన్స్‌ఫార్మేషన్ అటువంటి అంశాలను జాబితాభేదం చేస్తుంది:

అటువంటి అంశం వివరణ
transform కెలెయిలపై 2D లేదా 3D ట్రాన్స్‌ఫార్మేషన్ ఆపాదించు.
transform-origin ట్రాన్స్‌ఫార్మేషన్ కెలెయిలను మార్చుట అనుమతిస్తుంది.

CSS 2D ట్రాన్స్‌ఫార్మేషన్ మాథ్యూర్స్

ఫంక్షన్ వివరణ
matrix(n,n,n,n,n,n) డిఫైన్ 2D ట్రాన్స్‌ఫార్మేషన్, ఆరు విలువల మాట్రిక్స్ ఉపయోగించి.
translate(x,y) డిఫైన్ 2D ట్రాన్స్‌ఫార్మేషన్, ఎక్స్ మరియు యెయ్ అక్షాల పైన కెలెయిలు తరలించు.
translateX(n) డిఫైన్ 2D ట్రాన్స్‌ఫార్మేషన్, ఎక్స్ అక్షం పైన కెలెయిలు తరలించు.
translateY(n) డిఫైన్ 2D ట్రాన్స్‌ఫార్మేషన్, యెయ్ అక్షం పైన కెలెయిలు తరలించు.
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 2D స్కీవ్ ట్రాన్స్‌ఫార్మ్ నిర్వచించండి, X మరియు Y అక్షాల పైన
skewX(angle) 2D స్కీవ్ ట్రాన్స్‌ఫార్మ్ నిర్వచించండి, X అక్షం పైన
skewY(angle) 2D స్కీవ్ ట్రాన్స్‌ఫార్మ్ నిర్వచించండి, Y అక్షం పైన