CSS ట్రాన్స్ఫార్మ్-ఓరిజిన్ అట్రిబ్యూట్

定义和用法

transform-origin 属性允许您改变被转换元素的位置。

2D మార్పు కార్యకలాపాలు కార్యకలాపాలను x మరియు y అక్షాలను మార్చవచ్చు. 3D మార్పు కార్యకలాపాలు Z అక్షాన్ని కూడా మార్చవచ్చు.

transform-origin అనువర్తనంను బాగా అర్థం చేసుకోవడానికి ఈ నిర్వహణను చూడండి:ప్రదర్శన.

సఫారీ/క్రోమ్ వినియోగదారులకు: transform-origin అనువర్తనంను 3D మార్పులలో ఉపయోగించడం గురించి బాగా అర్థం చేసుకోవడానికి ఈ నిర్వహణను చూడండి:ప్రదర్శన.

ప్రకటన:ప్రత్యామ్నాయంగా: transform అనువర్తనాలు కలిసి ఉపయోగించండి.

transform అనువర్తనాన్ని మరింత బాగా అర్థం చేసుకోవడానికి ఈ నిర్వహణను చూడండి:ప్రదర్శన.

మరింత చూడండి:

CSS3 శిక్షణ కొరకు:CSS3 2D ట్రాన్స్ఫార్మ్

CSS3 శిక్షణ కొరకు:CSS3 3D ట్రాన్స్ఫార్మ్

HTML DOM పరిశీలన కొరకు:transformOrigin అనువర్తనం

ఉదాహరణ

రోటేషన్ చేసే అంశం మూల స్థానాన్ని నిర్ణయించండి:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

స్వయంగా ప్రయోగించండి

పేజీ కిందికి మరిన్ని ఉదాహరణలు ఉన్నాయి.

CSS సంక్రమణం

transform-origin: x-axis y-axis z-axis;

అనువర్తనం విలువ

విలువ వివరణ
x-axis

ప్రదర్శన నుంచి X అక్షాన్ని ఎక్కడ ఉంచాలి. సాధ్యమైన విలువలు:

  • ఎడమ
  • మధ్యస్థ స్థితి
  • కుడి
  • పొడవు
  • %
y-axis

ప్రదర్శన నుంచి Y అక్షాన్ని ఎక్కడ ఉంచాలి. సాధ్యమైన విలువలు:

  • పైస్థితి
  • మధ్యస్థ స్థితి
  • తక్కువస్థితి
  • పొడవు
  • %
z-axis

ప్రదర్శన నుంచి Z అక్షాన్ని ఎక్కడ ఉంచాలి. సాధ్యమైన విలువలు:

  • పొడవు

సాంకేతిక వివరాలు

అప్రమేయం విలువ: 50% 50% 0
పారంపర్యం అనుసరించుట: లేదు
సంస్కరణం: CSS3
జావాస్క్రిప్ట్ సంక్రమణం: ఆబ్జెక్ట్.style.transformOrigin="20% 40%"

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

పట్టికలో ఉన్న సంఖ్యలు ఈ అనువర్తనాన్ని పూర్తిగా మద్దతు ఇస్తున్న ప్రాథమిక బ్రౌజర్ సంస్కరణను సూచిస్తాయి.

డబ్ల్యుసిఇ ముందుకు ఉన్న -webkit-、-moz- లేదా -ms- అనువర్తనాలతో ఉన్న సంఖ్యలు ప్రాథమిక సంక్రమణాన్ని వినియోగిస్తాయి.

అనువర్తనం క్రోమ్ ఐఇ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
transform-origin
(రెండు విలువల సంక్రమణం)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(మూడు విలువల సంక్రమణం)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-