?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默認(rèn)值:50% 50%,效果等同于center center
適用于:所有塊級(jí)元素及某些內(nèi)聯(lián)元素
繼承性:無
動(dòng)畫性:當(dāng)值為數(shù)值時(shí)
計(jì)算值:除了指定絕對(duì)值,否則都為百分比
媒體:視覺
<percentage>:用百分比指定坐標(biāo)值??梢詾樨?fù)值。
<length>:用長度值指定坐標(biāo)值??梢詾樨?fù)值。
left:指定原點(diǎn)的橫坐標(biāo)為left
center①:指定原點(diǎn)的橫坐標(biāo)為center
right:指定原點(diǎn)的橫坐標(biāo)為right
top:指定原點(diǎn)的縱坐標(biāo)為top
center②:指定原點(diǎn)的縱坐標(biāo)為center
bottom:指定原點(diǎn)的縱坐標(biāo)為bottom
該屬性提供2個(gè)參數(shù)值。
如果提供兩個(gè),第一個(gè)用于橫坐標(biāo),第二個(gè)用于縱坐標(biāo)。
如果只提供一個(gè),該值將用于橫坐標(biāo);縱坐標(biāo)將默認(rèn)為50%。
對(duì)應(yīng)的腳本特性為transformOrigin。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-35.0-webkit- | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-4.4.4-webkit- | 18.0-34.0-webkit- |
9.0-ms- | 3.5-15.0-moz- | 36.0+ | 9.0+ | 23.0+ | 9.0+ | 40.0+ | 35.0+ | |
10.0+ | 16.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>transform-origin_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test{margin:0;padding:0;list-style:none;border:1px solid #000;} .test li{width:50px;height:50px;border:1px solid #000;background:#ddd; -moz-transform-origin:0 0;-moz-transform:rotate(45deg); -webkit-transform-origin:0 0;-webkit-transform:rotate(45deg); -ms-transform-origin:0 0;-ms-transform:rotate(45deg); transform-origin:0 0;transform:rotate(45deg); } </style> </head> <body> <ul class="test"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例