CSS3特效之轉換transform

transform

語法

1. transform: none| rotate | scale | skew | translate | matrix;
2. 通過transform-origin可以設置轉換參考位置，默認值爲50% 50%,即 center center
3. 1.rotate(<angle>)：旋轉，參照轉換中心旋轉，如transform:rotate(60deg);
4. 2.scale(<number>[, <number>])：縮放，參數1表示沿X軸方向縮放，參數2表示沿Y軸方向縮放，如果只提供一個參數，則第二個參數值與第一個相等，相關屬性：scaleX(<number>), scaleY(<number>)
5. 3.translate(<length>[, <length>])：平移，參數1表示沿X軸方向平移，參數2表示沿Y軸方向平移，如果只提供一個參數，則第二個參數值爲0，相關屬性：translateX(<length>), translateY(<length>)
6. 4.skew(<angle>[,<angle>]):扭曲，參數1表示沿X軸方向扭曲，參數2參數表示沿Y軸方向扭曲，如果只提供一個參數，則第二個參數爲0，相關屬性：skewX(<angle>), skewY(<angle>)
7. 5.matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a,b,c,d,e,f]變換矩陣

一、旋轉rotate

1. .rotate-1{
2. width:100px;
3. height:100px;
4. background-color:#f90;
5. -webkit-transform:rotate(30deg);
6. -moz-transform:rotate(30deg);
7. transform:rotate(30deg); //順時針旋轉30度
8. }

二、縮放scale

默認狀態

 

縮小50%

 

放大50%

1. .scale-1{ /*縮小*/
2. display:inline-block;
3. width:100px;
4. height:100px;
5. line-height:100px;
6. text-align:center;
7. background-color:#66f;
8. -webkit-transform:scale(0.5, 0.5);
9. -moz-transform:scale(0.5, 0.5);
10. transform:scale(0.5, 0.5);
11. }
12. .scale-2{ /*放大*/
13. display:inline-block;
14. width:100px;
15. height:100px;
16. line-height:100px;
17. margin-left:20px;
18. text-align:center;
19. background-color:#66f;
20. -webkit-transform:scale(1.5, 1.5);
21. -moz-transform:scale(1.5, 1.5);
22. transform:scale(1.5, 1.5);
23. }
24. /*說明：如果X,Y軸 縮放的倍數一致的話，也可以只寫一個值，如：transform:scale(0.8);
25. 也可以通過scaleX(<number>), scaleY(<number>)來分別設置X,Y軸的縮放情況*/

三、移動translate

默認狀態

 

向右偏移10

 

向上左各偏移10

1. /*元素的非變形屬性省略不寫*/
2. .translate-2{ /*向右偏移10px*/
3. -webkit-transform:translate(10px);
4. -moz-transform:translate(10px);
5. transform:translate(10px);
6. }
7.  
8. .translate-3{ /*向上左各偏移10*/
9. -webkit-transform:translate(-10px, -10px);
10. -moz-transform:translate(10px, -10px);
11. transform:translate(10px, -10px);
12. }
13. /*說明：translate屬性與scale屬性有所不同，如果只給一個值的話，默認第二個值爲0
14. 也可以通過translateX(<number>), translateY(<number>)來分別設置X,Y軸的移動情況*/

四、扭曲skew

無扭曲

 

X:扭曲30

 

Y:扭曲10

 

Y:扭曲(30.10)

1. .skew-1{ /*沿X方向扭曲30deg*/
2. -webkit-transform:skew(30deg);
3. -moz-transform:skew(30deg);
4. transform:skew(30deg);
5. }
6. .skew-2{ /*沿Y方向扭曲10deg*/
7. -webkit-transform:skew(0, 10deg);
8. -moz-transform:skew(0,10deg);
9. transform:skew(0,10deg);
10. }
11. .skew-3{ /*沿X、Y方向分別扭曲30deg, 10deg*/
12. -webkit-transform:skew(30deg, 10deg);
13. -moz-transform:skew(30deg, 10deg);
14. transform:skew(30deg, 10deg);
15. }