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 ,歡迎大家傳播與分享.