網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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

日期:2013-11-25  來源:攀枝花惠康網絡公司

transform(變形)和transform-origin(變形原點)演示地址:http://www.css88.com/tool/css3Preview/Transform.html

transform(變形)和transform-origin(變形原點)的聲名:
  • 今朝這兩個屬性獲得了除去ie以外各個主流瀏覽器webkit,firefox,opera的撐持,屬性名分袂為 -webkit-transform,-moz-transform,-o-transform;
  • transform-origin是變形原點,也就是該元素環繞著阿誰點變形或扭轉,該屬性只有在設置了transform屬性的時辰起浸染;
    • 語法:-moz-transform-origin: [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | bottom ] ?
    • transform-origin接管兩個參數,它們可所以百分比,em,px等具體的值,也可所以left,center,right,或者 top,center,bottom等描述性參數 ;
    • 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屬性實現了一些可用SVG實現的同樣的功能。它可用于內聯(inline)元素和塊級(block)元素。它許可我們扭轉、縮放和移動元素 ,他有幾個屬性值參數:
    • rotate(扭轉)許可你經由過程傳遞一個度數值來動彈一個對象;
    • scale是一個縮放功能,可以讓任一元素變的更年夜。它使用一個或者兩個正數和負數以及小數作為參數;當使用一個參數時暗示X軸和Y軸的縮放不異;
    • translate就是基于X和Y 坐標年夜頭定位元素,當使用一個參數時暗示X軸和Y軸的參數不異;
    • skew傾斜(ps中的斜切),參數是度數,當使用一個參數時暗示X軸和Y軸的參數不異;
    • matrix矩陣變換,就是基于X和Y 坐標年夜頭定位元素,它使用6個參數 ,本例中未涉及;

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图