|
鏈?zhǔn)阶冃?/strong>
變形常常是單獨(dú)的，但是如果你想同時(shí)用到多種變形，代碼也是可以快速整合的，特別是使用私有擴(kuò)展。幸運(yùn)的是，我們有一些內(nèi)置的縮寫：
#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}
這些變形可以被鏈到一起，從而讓你的代碼更高效:
nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}
這些屬性的真正的威力是合并到一起。你可以移動(dòng)、旋轉(zhuǎn)、縮放并控制任何內(nèi)聯(lián)元素和塊級(jí)元素而不使用JavaScript。一旦這些屬性的支持變的更加廣泛，我們就可以創(chuàng)建更豐富和更輕量的界面和應(yīng)用。
transform-origin
transform-origin不是transform的一個(gè)子功能，但是和transform關(guān)系非常密切。它可以用來(lái)指定transform的起點(diǎn)，比如，rotate變形的默認(rèn)起點(diǎn)是其中間，你可以將起點(diǎn)設(shè)置在左上角，或者左下角，這樣rotate變形的結(jié)果就可能大不相同了。
transform-origin接受兩個(gè)參數(shù)，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,middle,bottom等描述性參數(shù)。幾個(gè)例子：
.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
...}
瀏覽器兼容性
該屬性目前也只有webkit和firefox支持，而且需要添加各自的私有前綴。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) 你需要知道的CSS3動(dòng)畫(huà)技術(shù) [3] 下一頁(yè) 你需要知道的CSS3動(dòng)畫(huà)技術(shù) [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 你需要知道的CSS3動(dòng)畫(huà)技術(shù) [4]
