CSS perspective() ఫంక్షన్

నిర్వచనం మరియు ఉపయోగం

CSS perspective() CSS ఫంక్షన్ వినియోగికర్తను z=0 ప్లాన్‌కు దూరంను నిర్దేశిస్తుంది。

perspective() ఫంక్షన్ ఉపయోగించబడింది transform అంశంలో ఉపయోగించబడింది.

ఉదాహరణ

ఉపయోగించండి perspective() రెండు క్యూబ్లకు కొన్ని పర్స్పెక్టివ్ ప్రభావాలను జోడించండి:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

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

CSS సింథెక్స్

perspective(length|none)
విలువ వివరణ
length అత్యవసరం. వినియోగదారిని z=0 ప్లాన్‌కు దూరంను నిర్దేశించండి. none అంటే మార్పులు చేయకుండా ఉండడం.

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

సంస్కరణ: CSS Transforms Module Level 2

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

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్‌ను పూర్తిగా మద్దతు ఇస్తున్న ప్రయాణికి బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

చ్రోమ్ ఎడ్జ్ ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

సంబంధిత పేజీలు

పాఠ్యక్రమంలో ఉంది:CSS 3D ట్రాన్స్‌ఫార్మ్

参考：CSS ట్రాన్స్ఫార్మ్ అట్రిబ్యూట్

参考：CSS rotate() ఫంక్షన్

参考：CSS rotate3d() ఫంక్షన్

参考：CSS rotateX() ఫంక్షన్

参考：CSS rotateY() 函数

参考：CSS rotateZ() 函数