è¯æ³•项目 | 说明 |
---|---|
åˆå§‹å€¼ | 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+ |