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. }