| è¯æ³•é¡¹ç›® | 说明 |
|---|---|
| åˆå§‹å€¼ | 50% 50% |
| 适用于 | å—å…ƒç´ å’Œè¡Œå†…å…ƒç´ |
| å¯å¦ç»§æ‰¿ | å¦ |
| å–值 | 长度值 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
perspective-origin属性定义在Xè½´å’ŒYè½´çš„3Då…ƒç´ ã€‚è¿™ä¸ªå±žæ€§å…è®¸ä½ æ”¹å˜3Då…ƒç´ çš„åº•éƒ¨ä½ç½®ã€‚定义时的perspective-originå±žæ€§ï¼Œå®ƒæ˜¯ä¸€ä¸ªå…ƒç´ çš„åå…ƒç´ ï¼Œé€è§†å›¾ï¼Œè€Œä¸æ˜¯å…ƒç´ 本身。
æ示：使用æ¤å±žæ€§å¿…须和perspective属性一起使用，åªå½±å“3D转æ¢çš„å…ƒç´ ï¼
å—å½±å“å˜å½¢å‡½æ•°ï¼šperspective()。
该属性æä¾›2个å‚数值，第一个用于横åæ ‡ï¼Œç¬¬äºŒä¸ªç”¨äºŽçºµåæ ‡ï¼›å¦‚æžœåªæ供一个，该值将用于横åæ ‡ï¼Œçºµåæ ‡å°†é»˜è®¤ä¸º50%。
percentage：用百分比指定åæ ‡å€¼ã€‚å¯ä»¥ä¸ºè´Ÿå€¼ã€‚
length：用长度值指定åæ ‡å€¼ã€‚å¯ä»¥ä¸ºè´Ÿå€¼ã€‚
left,center right是水平方å‘å–值，而top center bottom是垂直方å‘çš„å–值。
.demo_box{
position:relative;
background:#4d6ea6;
margin:100px auto;
-webkit-animation:demo_box 4s infinite linear;
-moz-animation:demo_box 4s infinite linear;
}
.demo_box:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
.mod_run_code{
-webkit-perspective-origin:right top;
-moz-perspective-origin:right top;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-webkit-transform: perspective(500px);
-moz-transform: perspective(500px);
}
@-webkit-keyframes demo_box{
0%{-webkit-transform:rotateX(0deg);}
100%{-webkit-transform:rotateX(360deg);}
}
@-moz-keyframes demo_box{
0%{-moz-transform:rotateX(0deg);}
100%{-moz-transform:rotateX(360deg);}
}
<div class="demo_box">默认的é€è§†åŽŸç‚¹%</div>
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |