CSS動畫:Transform中使用頻繁的scale,rotate,translate動畫

動畫中,skew只是transform中的一種形式的動畫,咱們還能夠學習scale,rotate,translate.這是目前使用比較頻繁的屬性動做.

1.scale動畫的定義:(單位數值)

scale動畫,是將對象進行伸縮操做.scale有兩個屬性,第一個是寬(X)的伸縮,第二個是高(Y)的伸縮,數值是以倍數的方式變化.他也能夠分開定義scaleX,scaleY;根據本身的須要設定.

 

CSS代碼案例:

.scale{
    width: 100px;
    height: 100px;
    
    /*transform:scale(3,2); !*第一個參數是橫向縮放,第二個蠶食縱向縮放*!*/
    /*也能夠分開寫*/
    transform: scaleX(1) scaleY(3);
}

 

 

 

2.rotate動畫的定義:(單位deg)

rotate動畫,是將對象進行旋轉操做,是按順時針方式旋轉.他還能夠有rotateX,rotateY,rotateZ的方式旋轉.你們能夠用代碼試試其中的效果.下面用了四種方式的效果

 

CSS代碼案例:

.rotate,.rotate2,.rotate3,.rotate4{
    width:200px;
    height: 100px;

    margin:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;;
}
.rotate{
    transform:rotate(10deg)
}
.rotate2{
    transform:rotateX(-180deg)
}

.rotate3{
    transform: rotateY(180deg);
}

.rotate4{
    transform: rotateZ(180deg);
}

 

 

 

3.translate動畫定義: 單位(像素)

translate是將對象在區域上進行移動.他有兩個屬性,translate(x,y),以座標的方式存在.也就是能夠有 左/右/上/下 方式的移動.按照值的正負數來決定位置.他也能夠分開定義translateX(x),translateY(y);

 

CSS代碼案例:

.translate{
    width:200px;
    height: 100px;
    
    margin:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;;
}
.translate{
    transform: translate(-30px,100px);
}

 

 

 

4.矩陣方式的定義:

matrix這個屬性稱爲矩陣,其實他一種排列方式.這個屬性是transform動畫屬性的合併寫法,可是也是難理解的方式.好比:    

 

CSS代碼案例:

    transform: translateX(12px) translateY(20px)     
    
    transform: matrix(1,0,0,1,12,20)

 

代碼中是效果是同樣的,他們是等同的.固然還能夠有更多的動畫屬性一塊兒定義.

 

注意:圖片中的效果,只表明是屬性的效果.代碼中的效果能夠本身複製到代碼編輯器中,執行看效果.

 

 本文屬於吳統威的博客,微信公衆號:bianchengderen 的原創文章,轉載時請註明出處及相應連接:http://www.wutongwei.com/front/infor_showone.tweb?id=155 ,歡迎你們傳播與分享.