CSS పెర్స్పెక్టివ్‌ఓరిజిన్ అట్రిబ్యూట్
- ముంది పేజీ పర్స్పెక్టివ్
- తరువాత పేజీ place-content
నిర్వచనం మరియు ఉపయోగం
perspective-origin లక్షణం 3D అంశాలకు ఆధారంగా ఉన్న X, Y అక్షాలను నిర్వచిస్తుంది. ఈ లక్షణం మీద ఉన్న 3D అంశాల తక్కువస్థానాన్ని మార్చవచ్చు.
ప్రస్తుతం perspective-origin లక్షణాన్ని నిర్వచించిన అంశానికి పిల్లలు పర్స్పెక్టివ్ ప్రభావాన్ని పొందిస్తాయి, కాదు అంశం స్వయం.
ప్రకటన:ఈ లక్షణం తో కలిపి ఉపయోగించాలి పర్స్పెక్టివ్ లక్షణాలను కలిపి ఉపయోగించాలి, మరియు మాత్రమే 3D ట్రాన్స్ఫార్మ్ అంశాలను ప్రభావితం చేస్తాయి.
మరింత చూడండి:
CSS3 శిక్షణ పత్రికCSS3 3D ట్రాన్స్ఫార్మ్
HTML DOM పరిశీలన పత్రికperspectiveOrigin లక్షణం
ప్రాయోగిక ఉదాహరణ
3D అంశాల బేస్ పోసిషన్ నిర్వహించండి:
డివ్
{
perspective:150;
perspective-origin: 10% 10%;
}
CSS సంకేతాలు
perspective-origin: x-axis y-axis;
లక్షణ విలువ
| విలువ | వివరణ |
|---|---|
| x-axis |
ఈ దృశ్యాన్ని x అక్షంపై నిర్వచించండి. అప్రమేయం: 50%. సాధ్యమైన విలువలు:
|
| y-axis |
ఈ దృశ్యాన్ని y అక్షంపై నిర్వచించండి. అప్రమేయం: 50%. సాధ్యమైన విలువలు:
|
సాంకేతిక వివరాలు
| అప్రమేయం: | 50% 50% |
|---|---|
| పారంపర్యం: | లేదు |
| సంస్కరణ: | CSS3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | ఆబ్జెక్ట్.style.perspectiveOrigin="10% 10%" |
బ్రౌజర్ మద్దతు
పట్టికలోని సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ సంస్కరణను పేర్కొంది.
| క్రోమ్ | IE / ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
- ముంది పేజీ పర్స్పెక్టివ్
- తరువాత పేజీ place-content
