App下載

CSS3 transform(變形)和transform-origin(變形原點(diǎn))調(diào)試工具

　這是一款可在線調(diào)試CSS3 transform(變形)和transform-origin(變形原點(diǎn))的工具?？筛鶕?jù)左側(cè)的滑塊改變參數(shù)同時(shí)右側(cè)實(shí)時(shí)顯示預(yù)覽效果，且預(yù)覽效果的下 方能夠同時(shí)生成對(duì)應(yīng)的css3效果代碼，代碼下方還針對(duì)CSS3的transform(變形)和transform-origin(變形原點(diǎn))給出了詳細(xì) 的說(shuō)明，方便需要的朋友使用。


效果設(shè)置區(qū)

變形原點(diǎn)

變形參數(shù)

效果預(yù)覽區(qū)

transform(變形)和transform-origin(變形原點(diǎn)) -Css3演示

代碼區(qū)

說(shuō)明

Safari 4 Firefox3.5 Opera10.5 Chrome Internet Explorer

  • 目前這兩個(gè)屬性得到了除去ie以外各個(gè)主流瀏覽器webkit，firefox，opera的支持，屬性名分別為 -webkit-transform，-moz-transform，-o-transform;
  • transform-origin是變形原點(diǎn)，也就是該元素圍繞著那個(gè)點(diǎn)變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時(shí)候起作用；
    • 語(yǔ)法：-moz-transform-origin: [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | bottom ] ?
    • transform-origin接受兩個(gè)參數(shù)，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,center,bottom等描述性參數(shù) ;
    • top left | left top 等價(jià)于 0 0；
    • top | top center | center top 等價(jià)于 50% 0
    • right top | top right 等價(jià)于 100% 0
    • left | left center | center left 等價(jià)于 0 50%
    • center | center center 等價(jià)于 50% 50%（默認(rèn)值）
    • right | right center | center right 等價(jià)于 100% 50%
    • bottom left | left bottom 等價(jià)于 0 100%
    • bottom | bottom center | center bottom 等價(jià)于 50% 100%
    • bottom right | right bottom 等價(jià)于 100% 100%
  • transform屬性實(shí)現(xiàn)了一些可用SVG實(shí)現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(jí)(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動(dòng)元素 ，他有幾個(gè)屬性值參數(shù)：
    • rotate(旋轉(zhuǎn))允許你通過(guò)傳遞一個(gè)度數(shù)值來(lái)轉(zhuǎn)動(dòng)一個(gè)對(duì)象；
    • scale是一個(gè)縮放功能，可以讓任一元素變的更大。它使用一個(gè)或者兩個(gè)正數(shù)和負(fù)數(shù)以及小數(shù)作為參數(shù)；當(dāng)使用一個(gè)參數(shù)時(shí)表示X軸和Y軸的縮放相同；
    • translate就是基于X和Y 坐標(biāo)重新定位元素，當(dāng)使用一個(gè)參數(shù)時(shí)表示X軸和Y軸的參數(shù)相同；
    • skew傾斜（ps中的斜切），參數(shù)是度數(shù)，當(dāng)使用一個(gè)參數(shù)時(shí)表示X軸和Y軸的參數(shù)相同；
    • matrix矩陣變換，就是基于X和Y 坐標(biāo)重新定位元素，它使用6個(gè)參數(shù) ，本例中未涉及；