CSS3變形處理

transform 可以對文字或影象的旋轉、縮放、傾斜、移動進行變形處理。基準點為元素的中心點，可以通過transform-origin 修改基準點，如 transform-origin: left bootom;

旋轉

使用rotate方法來實現文字或影象的旋轉處理，在引數中指定旋轉角度。

/*順時針旋轉30°*/
transform: rotate(30deg);

縮放

使用scale方法來實現文字或影象的縮放處理，在引數中指定縮放倍率。

/*水平方向、垂直方向縮小一半*/
transform: scale(0.5);
/*水平方向縮小一半、垂直方向放大一倍*/
 

transform: scale(0.5, 2);

傾斜

使用skew方法來實現文字或影象的傾斜處理，在引數中分佈指定水平方向上的傾斜角度與垂直方向上的傾斜角度。

/*水平方向、垂直方向傾斜30°*/
transform: skew(30deg, 30deg);
/*只在水平方向傾斜30°*/
transform: skew(30deg);

移動

使用translate方法來實現文字或影象的移動處理，在引數中分佈指定水平方向上的移動距離與垂直方向上的移動距離。

/*水平方向、垂直方向移動50px*/
transform: translate(50px, 50px);
/*只在水平方向移動50px*/
 

transform: translate(50px);

CSS3動畫過渡

Transitions 將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另一個屬性值來實現動畫功能。

transition: property duration timing-function delay;
/*也可以單獨書寫*/
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: transition-delay
 
;

• property：表示對哪個屬性進行平滑過渡
• duration：表示在多久時間內完成屬性值的平滑過渡
• timing-function：表示通過什麼方法進行平滑過渡，緩動函式
• delay： 表示指定變換動畫特效延遲多久後才開始執行（當觸發特效後，經過delay屬性指定的延遲時間後才真正開始執行特效，單位秒或者毫秒）

支援多個屬性

background-color: #ff0;
color: #000;
width: 300px;
transition: background-color 1s linear, color 2s linear, width 3s linear;

scale和zoom區別

• zoom的縮放是相對於左上角的；而scale預設是居中縮放，可以通過transform-origin修改基準點
• zoom的縮放改變了元素佔據的空間大小；而scale的縮放佔據的原始尺寸不變，頁面佈局不會發生變化（下面重點提及）
• 對文字的縮放規則不一致。zoom縮放依然受限於最小12畫素中文大小限制；而scale就是純粹的對圖形進行比例控制，文字50%原來尺寸
• 相容性問題。firefox下不支援zoom；scale針對IE9+

佔據空間大小

頁面容器預設3840px * 2160px，通過監聽onresize來動態控制縮放比例（這通常在大屏展示情況要使用），1920 < 當前尺寸< 2880時縮放0.75，<=1920時縮放0.5。

<style>
  .container {
    width: 3840px;
    height: 2160px;
    background-color: #0b97c4;
  }

  .scale-three-quarters {
    -weikit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
  }

  .scale-half {
    -weikit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
  }
</style>
<div class="container"></div>

/**
 * 動態改變縮放比例
 */
function changeScale() {
  var containerDom = document.querySelector('.container');
  if (window.outerWidth <= 1920) {
    containerDom.classList.remove('scale-three-quarters');
    containerDom.classList.add('scale-half');
  } else if (window.outerWidth > 1920 && window.outerWidth < 2880) {
    containerDom.classList.remove('scale-half');
    containerDom.classList.add('scale-three-quarters');
  }
}
// 進入頁面時，進行動態判斷控制
changeScale();
// 改變頁面大小時，進行動態判斷控制
window.onresize = changeScale;

如在解析度下1920 * 1080會縮放0.5，截圖效果如下（注意，豎向滾動條；橫向縮放了，實際尺寸為1920px；縱向不會縮放，實際尺寸仍然為3840px）

Chrome瀏覽器下，可以通過設定html和body設定寬度、高度進行控制。

html, body {
  width: 100%;
  height: 100%;
}

但是，在Firefox下，上述設定不會起到任何效果。可以通過下述兩種方式進行控制！
方案一：通過overflow:hidden來強制覆蓋超出內容，只檢視當前螢幕內容。缺點，超出的內容無法檢視！

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

方案二：通過動態計算高度和寬度賦值給cotanier外層容器然後給外層容器設定overflow:hidden，來控制展示

<div style="height: 1080px; width: 1920px; overflow: hidden;">
  <div class="container"></div>
</div>

上述height和width可以通過動態計算獲取，然後賦值給DOM元素！完美解決！