è¯æ³•é¡¹ç›® | 说明 |
---|---|
åˆå§‹å€¼ | center center,效果ç‰åŒäºŽ 50% 50% |
适用于 | å—å…ƒç´ å’Œè¡Œå†…å…ƒç´ |
å¯å¦ç»§æ‰¿ | å¦ |
媒介 | 视觉 |
版本 | CSS3.0 |
该属性æä¾›2个å‚数值,第一个用于横åæ ‡ï¼Œç¬¬äºŒä¸ªç”¨äºŽçºµåæ ‡ï¼›å¦‚æžœåªæ供一个,该值将用于横åæ ‡ï¼Œçºµåæ ‡å°†é»˜è®¤ä¸º50%。
percentage:用百分比指定åæ ‡å€¼ã€‚å¯ä»¥ä¸ºè´Ÿå€¼ã€‚
length:用长度值指定åæ ‡å€¼ã€‚å¯ä»¥ä¸ºè´Ÿå€¼ã€‚
left center right是水平方å‘å–值,而top center bottom是垂直方å‘çš„å–值。
.origin_1{ -webkit-transform-origin:center center; -moz-transform-origin:center center; -webkit-transition:0.5s ease all; -moz-transition:0.5s ease all; position:absolute; left:10px; top:50px; } .origin_2{ -webkit-transform-origin:left top; -moz-transform-origin:left top; -webkit-transition:0.5s ease all; -moz-transition:0.5s ease all; position:absolute; left:250px; top:50px; } .origin_3{ -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -webkit-transition:0.5s ease all; -moz-transition:0.5s ease all; position:absolute; left:480px; top:50px; } .origin_4{ -webkit-transform-origin:20px 60px; -moz-transform-origin:20px 60px; -webkit-transition:0.5s ease all; -moz-transition:0.5s ease all; position:absolute; left:250px; top:160px; } .origin_1:hover, .origin_2:hover, .origin_3:hover, .origin_4:hover{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); }
<div class="demo_box origin_1">在ä¸å¿ƒç‚¹æ—‹è½¬45度</div> <div class="demo_box origin_2">在左上角旋转45度</div> <div class="demo_box origin_3">用百分百值æ¥æ¥è®¾ç½®æ—‹è½¬ç‚¹æ—‹è½¬45度</div> <div class="demo_box origin_4">用长度值æ¥è®¾ç½®æ—‹è½¬ç‚¹æ—‹è½¬45度</div>
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |