欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈CSS3中的变形功能-transform功能

程序员文章站 2023-11-26 22:59:46
这篇文章主要介绍了浅谈CSS3中的变形功能-transform功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 17-12-27...

css3中的变形功能:在css3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。

1、如何使用transform功能:

(1)在css3中通过transform属性来实现transform功能:

(2)transform功能使用方法:
transform:功能;
-ms-transform:功能;/*ie9*/   
-moz-transform:功能;/*firefox*/
-webkit-transform:功能;/*safari和chrome*/
-o-transform:功能;/*opera*/

2、rotate旋转,在参数中规定角度(rotate表示的是顺时针旋转,deg是css3中的角度单位):

(1)使用方法:
-ms-transform:rotate(角度);/*ie9*/   
-moz-transform:rotate(角度);/*firefox*/
-webkit-transform:rotate(角度);/*safari和chrome*/
-o-transform:rotate(角度);/*opera*/

(2)rotate旋转的应用:

1)html代码:

<div></div>

2)css代码:

div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(45deg);/*ie9*/     
    -moz-transform:rotate(45deg);/*firefox*/  
    -webkit-transform:rotate(45deg);/*safari和chrome*/  
    -o-transform:rotate(45deg);/*opera*/  
}  

3)效果图如下:

浅谈CSS3中的变形功能-transform功能

3、scale缩放转换:

(1)使用方法:transform:scale(值),他的值是指定的缩放倍率,比如0.5就是缩放50%,1就是缩放100%,1.5就是缩放150%;

-ms-transform:scale(值);/*ie9*/   
-moz-transform:scale(值);/*firefox*/
-webkit-transform:scale(值);/*safari和chrome*/
-o-transform:scale(值);/*opera*/

(2)可能的值:

1)scale(x,y)使元素x轴和y轴同时缩放;
2)scale(x)使元素仅x轴缩放;
3)scale(y)使元素仅y轴缩放;

(3)scale缩放转换的应用:

1)html代码:

<div></div>

2)css代码:

div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    /*缩放值x与y为正整数时*/  
    -ms-transform:scale(2,2);/*ie9*/     
    -moz-transform:scale(2,2);/*firefox*/  
    -webkit-transform:scale(2,2);/*safari和chrome*/  
    -o-transform:scale(2,2);/*opera*/  
      
    /*缩放值x与y均为小于1的浮点数时*/  
    /*-ms-transform:scale(0.5,0.5);*//*ie9*/     
    /*-moz-transform:scale(0.5,0.5);*//*firefox*/  
    /*-webkit-transform:scale(0.5,0.5);*//*safari和chrome*/  
    /*-o-transform:scale(0.5,0.5);*//*opera*/  
      
    /*缩放值仅x为小于1的浮点数时*/  
    /*-ms-transform:scalex(0.5);*//*ie9*/     
    /*-moz-transform:scalex(0.5);*//*firefox*/  
    /*-webkit-transform:scalex(0.5);*//*safari和chrome*/  
    /*-o-transform:scalex(0.5);*//*opera*/  
      
    /*缩放值仅y为小于1的浮点数时*/  
    /*-ms-transform:scaley(0.5);*//*ie9*/     
    /*-moz-transform:scaley(0.5);*//*firefox*/  
    /*-webkit-transform:scaley(0.5);*//*safari和chrome*/  
    /*-o-transform:scaley(0.5);*//*opera*/  
}  

3)效果图如下:

①未缩放时的效果图:

浅谈CSS3中的变形功能-transform功能

②缩放值x与y为正整数时的效果图:

浅谈CSS3中的变形功能-transform功能

③缩放值x与y均为小于1的浮点数时的效果图:

浅谈CSS3中的变形功能-transform功能

④缩放值仅x为小于1的浮点数时的效果图:

浅谈CSS3中的变形功能-transform功能

⑤缩放值仅y为小于1的浮点数时的效果图:

浅谈CSS3中的变形功能-transform功能

4、倾斜skew:

(1)使用方法:

transform:skew(角度);它的值是角度;
-ms-transform:skew(角度);/*ie9*/   
-moz-transform:skew(角度);/*firefox*/
-webkit-transform:skew(角度);/*safari和chrome*/
-o-transform:skew(角度);/*opera*/

(2)可能的值:

1)skew(x,y)使元素在水平方向和垂直方向同时扭曲(x轴和y轴同时按一定的角度值进行扭曲变形)只有一个参数的时候,只在水平方向上倾斜;
2)skewx(x)仅使元素在水平方向上扭曲变形(x轴扭曲变形)
3)skewy(y)仅使元素在垂直方向上扭曲变形(y轴扭曲变形)

(3)倾斜skew的应用:

1)html代码:

<div></div>

2)css代码:

div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
      
    /*x轴与y轴均倾斜*/  
    -ms-transform:skew(30deg,30deg);    
    -moz-transform:skew(30deg,30deg);  
    -webkit-transform:skew(30deg,30deg);  
    -o-transform:skew(30deg,30deg);  
      
    /*设置一个值相当于仅x轴倾斜*/  
    /*-ms-transform:skew(30deg);*//*ie9*/     
    /*-moz-transform:skew(30deg);*//*firefox*/  
    /*-webkit-transform:skew(30deg);*//*safari和chrome*/  
    /*-o-transform:skew(30deg);*//*opera*/  
      
    /*仅x轴倾斜*/  
    /*-ms-transform:skewx(30deg);*//*ie9*/     
    /*-moz-transform:skewx(30deg);*//*firefox*/  
    /*-webkit-transform:skewx(30deg);*//*safari和chrome*/  
    /*-o-transform:skewx(30deg);*//*opera*/  
      
    /*仅y轴倾斜*/  
    /*-ms-transform:skewy(30deg);*//*ie9*/     
    /*-moz-transform:skewy(30deg);*//*firefox*/  
    /*-webkit-transform:skewy(30deg);*//*safari和chrome*/  
    /*-o-transform:skewy(30deg);*//*opera*/  
}  

3)效果图如下:

①未倾斜的效果图:

浅谈CSS3中的变形功能-transform功能

②x轴与y轴均倾斜的效果图:

浅谈CSS3中的变形功能-transform功能

③设置一个值相当于仅x轴倾斜的效果图:

浅谈CSS3中的变形功能-transform功能

④仅x轴倾斜的效果图:

浅谈CSS3中的变形功能-transform功能

⑤仅y轴倾斜的效果图:

浅谈CSS3中的变形功能-transform功能

5、移动translate:

(1)使用方法:

transform:translate(值);它的值是指定移动的距离;
-ms-transform:translate(值);/*ie9*/   
-moz-transform:translate(值);/*firefox*/
-webkit-transform:translate(值);/*safari和chrome*/
-o-transform:translate(值);/*opera*/

(2)可能的值:
1)translate(x,y)水平方向与垂直方向同时移动(也就是x轴和y轴同时移动)只有一个参数的时候,只在水平方向上移动;
2)translatex(x)仅水平方向(x轴移动)
3)translatey(y)仅垂直方向(y轴移动)

(3)移动translate的应用:

1)html代码:

<div class="main">  
    <div class="div"></div>  
</div>  

2)css代码:

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
}  
.div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
      
    /*在x轴与y轴上均移动*/  
    -ms-transform:translate(50px,50px);/*ie9*/     
    -moz-transform:translate(50px,50px);/*firefox*/  
    -webkit-transform:translate(50px,50px);/*safari和chrome*/  
    -o-transform:translate(50px,50px);/*opera*/  
      
    /*设置一个值相当于仅在x轴上移动*/  
    /*-ms-transform:translate(50px);*//*ie9*/     
    /*-moz-transform:translate(50px);*//*firefox*/  
    /*-webkit-transform:translate(50px);*//*safari和chrome*/  
    /*-o-transform:translate(50px);*//*opera*/  
      
    /*仅在x轴上移动*/  
    /*-ms-transform:translatex(50px);*//*ie9*/     
    /*-moz-transform:translatex(50px);*//*firefox*/  
    /*-webkit-transform:translatex(50px);*//*safari和chrome*/  
    /*-o-transform:translatex(50px);*//*opera*/  
      
    /*仅在y轴上移动*/  
    /*-ms-transform:translatey(50px);*//*ie9*/     
    /*-moz-transform:translatey(50px);*//*firefox*/  
    /*-webkit-transform:translatey(50px);*//*safari和chrome*/  
    /*-o-transform:translatey(50px);*//*opera*/  
}  

3)效果图如下:

①未移动的效果图:

浅谈CSS3中的变形功能-transform功能

②在x轴与y轴上均移动时的效果图:

浅谈CSS3中的变形功能-transform功能

③设置一个值相当于仅在x轴上移动时的效果图:

浅谈CSS3中的变形功能-transform功能

④仅在x轴上移动时的效果图:

浅谈CSS3中的变形功能-transform功能

⑤仅在y轴上移动时的效果图:

浅谈CSS3中的变形功能-transform功能

6、对一个元素使用多种变形方法:(同样的方法只能使用一次)

(1)使用方法:

transform:方法1 方法2 方法3 方法4;
-ms-transform:方法1 方法2 方法3 方法4;/*ie9*/   
-moz-transform:方法1 方法2 方法3 方法4;/*firefox*/
-webkit-transform:方法1 方法2 方法3 方法4;/*safari和chrome*/
-o-transform:方法1 方法2 方法3 方法4;/*opera*/

(2)对一个元素使用多种变形方法的应用:

1)html代码:

<div class="main">  
    <div class="div"></div>  
</div>  

2)css代码:

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
}  
.div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:translatex(200px) rotate(30deg) skew(30deg,30deg) scaley(0.5);/*ie9*/     
    -moz-transform:translatex(200px) rotate(30deg) skew(30deg,30deg) scaley(0.5);/*firefox*/  
    -webkit-transform:translatex(200px) rotate(30deg) skew(30deg,30deg) scaley(0.5);/*safari和chrome*/  
    -o-transform:translatex(200px) rotate(30deg) skew(30deg,30deg) scaley(0.5);/*opera*/  
}  

3)效果图如下:

①未添加方法时的效果图:

浅谈CSS3中的变形功能-transform功能

②添加了多种方法时的效果图:

浅谈CSS3中的变形功能-transform功能

7、改变元素基点transform-origin:

(1)可能的值:

top left top right top
left center right
bottom left bottom bottom right

(2)默认情况下transform属性变化的基点是center,但是可以通过transform-origin改变transform属性变化的基点;

(3)改变元素基点transform-origin的应用:

1)html代码:

<div class="main">  
    <div class="div"></div>  
</div>  

2)css代码:

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
    margin-left: 140px;  
    margin-top: 180px;  
}  
.div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(30deg);/*ie9*/     
    -moz-transform:rotate(30deg);/*firefox*/  
    -webkit-transform:rotate(30deg);/*safari和chrome*/  
    -o-transform:rotate(30deg);/*opera*/  
      
    transform-origin: center;  
    /*transform-origin: top;*/  
    /*transform-origin: top left;*/  
    /*transform-origin: right top;*/  
    /*transform-origin: left;*/  
    /*transform-origin: right;*/  
    /*transform-origin: bottom left;*/  
    /*transform-origin: bottom;*/  
    /*transform-origin: bottom right;*/   
}  

3)效果图如下:

①未添加变形功能的效果图:

浅谈CSS3中的变形功能-transform功能

②添加旋转功能的效果图:

浅谈CSS3中的变形功能-transform功能

③以center为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

④以top为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑤以top left为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑥以right top为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑦以left为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑧以right为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑨以bottom left为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑩以bottom为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

⑪以bottom right为基点旋转的效果图:

浅谈CSS3中的变形功能-transform功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。