App下載

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

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


效果設置區(qū)

變形原點

變形參數(shù)

效果預覽區(qū)

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

代碼區(qū)

說明

Safari 4 Firefox3.5 Opera10.5 Chrome Internet Explorer

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