1. transform

1.1 基本概念

transform屬性主要用于元素的變形處理,對元素進(jìn)行旋轉(zhuǎn)晴埂、縮放眉踱、移動(dòng)或傾斜袄简。

1.2. transform的屬性

• translate : 平移
  指定對象2D平移,第一個(gè)參數(shù)對應(yīng)X軸,第二個(gè)參數(shù)對應(yīng)Y軸钩骇。
  一個(gè)參數(shù)時(shí)：表示水平方向移動(dòng)距離豺谈。
  兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向移動(dòng)距離郑象，第二個(gè)參數(shù)對應(yīng)垂直方向移動(dòng)距離。

.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 : 旋轉(zhuǎn)
  指定對象2D旋轉(zhuǎn)核无，需要有transform-origin屬性定義中心點(diǎn)扣唱，默認(rèn)為中心點(diǎn)。 順時(shí)針方向旋轉(zhuǎn)為正值团南，逆時(shí)針方向旋轉(zhuǎn)為負(fù)值噪沙。

  .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

設(shè)置中心點(diǎn)

transform-origin: 200px 200px;

rotate.png

• scale: 縮放
  指定對象2D縮放,第一個(gè)參數(shù)對應(yīng)X軸，第二個(gè)參數(shù)對應(yīng)Y軸吐根。
  一個(gè)參數(shù)時(shí)：表示水平正歼，垂直都縮放該倍率。
  兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)對應(yīng)水平方向縮放倍率拷橘，第二個(gè)參數(shù)對應(yīng)垂直方向縮放倍率局义。默認(rèn)原點(diǎn)transform-origin是中心點(diǎn)。

.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

設(shè)置中心點(diǎn)

transform-origin: 200px 200px;

scale.png

• skew: 傾斜
  指定對象傾斜扭曲冗疮。
  一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度萄唇。
  兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)對應(yīng)水平方向傾斜角度，第二個(gè)參數(shù)對應(yīng)垂直方向傾斜角度术幔。默認(rèn)原點(diǎn)transform-origin是中心點(diǎn)另萤。

.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 基本概念

主要用于元素的過渡動(dòng)畫處理

語法：

transition: property duration timing-function delay; 

2.2 transition屬性

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

• duration
  設(shè)置完成過渡效果所需的時(shí)間拔妥。

• timing-function
  設(shè)置過渡效果的動(dòng)畫類型忿危。

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

• delay
  設(shè)置延遲過渡效果的時(shí)間。
  單位為s（秒）或者ms(毫秒)没龙，默認(rèn)值是0铺厨。
• 詳細(xì)transition教程請戳

3. 鼠標(biāo)滑過圖片效果的例子

效果展示.gif