1. transform

1.1 基本概念

transform屬性主要用于元素的變形處理,對元素進行旋轉、縮放、移動或傾斜。

1.2. transform的屬性

• translate : 平移
  指定對象2D平移,第一個參數對應X軸,第二個參數對應Y軸。
  一個參數時：表示水平方向移動距離。
  兩個參數時：第一個參數表示水平方向移動距離，第二個參數對應垂直方向移動距離。

.before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }
.after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: translate(50px, 30px);
            -moz-transform: translate(50px, 30px);
            -ms-transform: translate(50px, 30px);
            -o-transform: translate(50px, 30px);
            transform: translate(50px, 30px);
        }

translate.png

• rotate : 旋轉
  指定對象2D旋轉，需要有transform-origin屬性定義中心點，默認為中心點。 順時針方向旋轉為正值，逆時針方向旋轉為負值。

  .before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }

  .after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

rotate.png

設置中心點

transform-origin: 200px 200px;

rotate.png

• scale: 縮放
  指定對象2D縮放,第一個參數對應X軸，第二個參數對應Y軸。
  一個參數時：表示水平，垂直都縮放該倍率。
  兩個參數時：第一個參數對應水平方向縮放倍率，第二個參數對應垂直方向縮放倍率。默認原點transform-origin是中心點。

.before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }
.after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: scale(0.5,0.5);
            -moz-transform: scale(0.5,0.5);
            -ms-transform: scale(0.5,0.5);
            -o-transform: scale(0.5,0.5);
            transform: scale(0.5,0.5);//效果等同于transform: scale(0.5);
        }

scale.png

設置中心點

transform-origin: 200px 200px;

scale.png

• skew: 傾斜
  指定對象傾斜扭曲。
  一個參數時：表示水平方向的傾斜角度。
  兩個參數時：第一個參數對應水平方向傾斜角度，第二個參數對應垂直方向傾斜角度。默認原點transform-origin是中心點。

.before {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DCF7A1;
        }
 .after {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #DDF0ED;
            -webkit-transform: skew(30deg, 0deg);
            -moz-transform: skew(30deg, 0deg);
            -ms-transform: skew(30deg, 0deg);
            -o-transform: skew(30deg, 0deg);
            transform: skew(30deg, 0deg);
        }

skew.png

2. transition

2.1 基本概念

主要用于元素的過渡動畫處理

語法：

transition: property duration timing-function delay; 

2.2 transition屬性

• property
  設置過渡效果中參與過渡效果的CSS屬性。如width,opacity,color等。
  all屬性:如果想給元素執行所有transition效果的屬性，可以用all屬性值來操作。

• duration
  設置完成過渡效果所需的時間。

• timing-function
  設置過渡效果的動畫類型。

linear(勻速)      ease(逐漸變慢)
ease-in(加速)     ease-out(減速)
ease-in-out(先加速后減速)
cubic-bezier(n,n,n,n)(自定義時間曲線);

• delay
  設置延遲過渡效果的時間。
  單位為s（秒）或者ms(毫秒)，默認值是0。
• 詳細transition教程請戳

3. 鼠標滑過圖片效果的例子

效果展示.gif