CSS3 perspective ÊôÐÔ

ʵÀý

ÉèÖÃÔªËØ±»²é¿´Î»ÖõÄÊÓͼ£º

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari ºÍ Chrome */
}

Ç××ÔÊÔÒ»ÊÔ

ä¯ÀÀÆ÷Ö§³Ö

Ŀǰä¯ÀÀÆ÷¶¼²»Ö§³Ö perspective ÊôÐÔ¡£

Chrome ºÍ Safari Ö§³ÖÌæ´úµÄ -webkit-perspective ÊôÐÔ¡£

¶¨ÒåºÍÓ÷¨

perspective ÊôÐÔ¶¨Òå 3D ÔªËØ¾àÊÓͼµÄ¾àÀ룬ÒÔÏñËØ¼Æ¡£¸ÃÊôÐÔÔÊÐíÄú¸Ä±ä 3D ÔªËØ²é¿´ 3D ÔªËØµÄÊÓͼ¡£

µ±ÎªÔªËض¨Òå perspective ÊôÐÔʱ£¬Æä×ÓÔªËØ»á»ñµÃ͸ÊÓЧ¹û£¬¶ø²»ÊÇÔªËØ±¾Éí¡£

×¢ÊÍ£ºperspective ÊôÐÔÖ»Ó°Ïì 3D ת»»ÔªËØ¡£

Ìáʾ£ºÇëÓë perspective-origin ÊôÐÔһͬʹÓøÃÊôÐÔ£¬ÕâÑùÄú¾ÍÄܹ»¸Ä±ä 3D ÔªËØµÄµ×²¿Î»Öá£

ĬÈÏÖµ£º none
¼Ì³ÐÐÔ£º yes
°æ±¾£º CSS3
JavaScript Óï·¨£º object.style.perspective=500

Óï·¨

perspective: number|none;
Öµ ÃèÊö
number ÔªËØ¾àÀëÊÓͼµÄ¾àÀ룬ÒÔÏñËØ¼Æ¡£
none ĬÈÏÖµ¡£Óë 0 Ïàͬ¡£²»ÉèÖÃ͸ÊÓ¡£
VUE