DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> css3動畫transform屬性系列之scale(縮放)
css3動畫transform屬性系列之scale(縮放)
編輯:HTML5詳解     

下面我們從3個方面開始介紹:

1、scale(x,y) 對元素進行縮放

  • X表示水平方向縮放的倍數 Y表示垂直方向的縮放倍數
  • Y是一個可選參數,沒有設置的話,則表示X,Y兩個方向的縮放倍數是一樣的。並以X為准
  1. transform:scale(2,2.5);
2、scaleX(<number>) 元素只在X軸(水平方向)縮放元素。
  • 默認值是1,基點一樣在元素的中心位置。可以通過transform-origin來改變基點
  1. transform:scaleX(2);
3、scaleY(<number>) 元素只在Y軸(垂直方向)縮放元素。
  • 基點一樣在元素的中心位置。可以通過transform-origin來改變基點。
  1. transform:scaleY(2);

最後我們看看兼容性寫法

  1.  
  2. .test{
  3. -moz-transform:scale(2,2);
  4. -webkit-transform:scale(2,2);
  5. -o-transform:scale(2,2);
  6. background:url(img/i.png) no-repeat;
  7. width:198px;
  8. height:133px;
  9. }
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved