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

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

CSS 3D ట్రాన్స్‌ఫార్మ్ ను మద్దతు చేస్తుంది.

క్రింది మెనూబర్స్ పై మౌస్ లక్ష్యించండి, 2D మరియు 3D ట్రాన్స్‌ఫార్మ్ మధ్య వ్యత్యాసాన్ని చూడండి:

2D rotate
3D rotate

在本章中，您将学习如下 CSS 属性：

  • transform

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

అటువంటి పేరులు ఉన్న లక్షణాలు ఉన్నాయి: చ్రోమ్ ఐఇ ఫైర్‌ఫాక్స్ సఫారీ ఒపెరా
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D ట్రాన్స్‌ఫార్మ్ మెథడ్

క్రియాశీలత ద్వారా transform అటువంటి ఫంక్షన్స్ ను ఉపయోగించవచ్చు:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() ఫంక్షన్

రోటేట్ ఎక్స్

rotateX() ఎల్లప్పుడూ ఎల్లప్పుడూ ప్రక్షేపణం అనిపించేలా అందుకు దృష్టి నిర్వచించండి.

ఫంక్షన్ మెట్హడ్

ఉదాహరణ
  transform: rotateX(150deg);
transform: rotateZ(90deg);

}

rotateY() ఫంక్షన్

రోటేట్ వై

rotateY() ఎల్లప్పుడూ ఎల్లప్పుడూ ప్రక్షేపణం అనిపించేలా అందుకు దృష్టి నిర్వచించండి.

ఫంక్షన్ మెట్హడ్

ఉదాహరణ
  transform: rotateY(130deg);
transform: rotateZ(90deg);

}

rotateZ() ఫంక్షన్

rotateZ() ఎల్లప్పుడూ ఎల్లప్పుడూ ప్రక్షేపణం అనిపించేలా అందుకు దృష్టి నిర్వచించండి.

ఫంక్షన్ మెట్హడ్

ఉదాహరణ
  #myDiv {
transform: rotateZ(90deg);

}

ప్రయత్నించండి

CSS ట్రాన్స్‌ఫార్మ్ లక్షణాలు

అటువంటి పేరులు ఉన్న లక్షణాలు ఉన్నాయి: వివరణ
transform ఎల్లప్పుడూ 2D లేదా 3D ట్రాన్స్‌ఫార్మ్ అందుకు ప్రయోగించిన ప్రాంతాన్ని అందుకు ప్రయోగించుట.
transform-origin ట్రాన్స్‌ఫార్మ్ అందుకు ప్రయోగించిన ప్రాంతాన్ని మార్చుట.
transform-style నాణ్యత నాలుగు దిక్కుల లో చివరి దిక్కును నిర్వచించండి.
perspective నాణ్యత నాలుగు దిక్కుల లో మధ్య దిక్కును నిర్వచించండి.
perspective-origin నాణ్యత నాలుగు దిక్కుల లో మొదటి దిక్కును నిర్వచించండి.
backface-visibility అందుకు సమాంతరంగా ఉన్న ఎల్లప్పుడూ ప్రక్షేపణం అనిపించేలా అందుకు దృష్టి నిర్వచించండి.

CSS 3D ట్రాన్స్‌ఫార్మ్ మెథడ్

ఫంక్షన్ వివరణ
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 నాణ్యత నాలుగు దిక్కుల లో మధ్య దిక్కును నిర్వచించండి.
translate3d(x,y,z) నాణ్యత నాలుగు దిక్కుల లో చివరి దిక్కును నిర్వచించండి.
translateX(x) నాణ్యత నాలుగు దిక్కుల లో మధ్య దిక్కును నిర్వచించండి.
translateY(y) నాణ్యత నాలుగు దిక్కుల లో మొదటి దిక్కును నిర్వచించండి.
translateZ(z) నాణ్యత నాలుగు దిక్కుల లో మధ్య దిక్కును నిర్వచించండి.
scale3d(x,y,z) నాణ్యత నాలుగు దిక్కుల లో మొదటి దిక్కును నిర్వచించండి.
scaleX(x) నాణ్యత నాలుగు దిక్కుల లో మొదటి దిక్కును నిర్వచించండి.
scaleY(y) నాణ్యత నాలుగు దిక్కుల లో మధ్య దిక్కును నిర్వచించండి.
scaleZ(z) నాణ్యత నాలుగు దిక్కుల లో చివరి దిక్కును నిర్వచించండి.
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) Y అక్షంపై ఉన్న 3D రోటేషన్ను నిర్వహించండి.
rotateZ(angle) Z అక్షంపై ఉన్న 3D రోటేషన్ను నిర్వహించండి.
perspective(n) 3D ట్రాన్స్‌ఫార్మ్ ఎలిమెంట్ యొక్క పర్స్పెక్టివ్ వీక్షణను నిర్వహించండి.