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）效果图如下：
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）效果图如下：
①未缩放时的效果图：
②缩放值x与y为正整数时的效果图：
③缩放值x与y均为小于1的浮点数时的效果图：
④缩放值仅x为小于1的浮点数时的效果图：
⑤缩放值仅y为小于1的浮点数时的效果图：
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）效果图如下：
①未倾斜的效果图：
②x轴与y轴均倾斜的效果图：
③设置一个值相当于仅x轴倾斜的效果图：
④仅x轴倾斜的效果图：
⑤仅y轴倾斜的效果图：
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）效果图如下：
①未移动的效果图：
②在x轴与y轴上均移动时的效果图：
③设置一个值相当于仅在x轴上移动时的效果图：
④仅在x轴上移动时的效果图：
⑤仅在y轴上移动时的效果图：
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）效果图如下：
①未添加方法时的效果图：
②添加了多种方法时的效果图：
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）效果图如下：
①未添加变形功能的效果图：
②添加旋转功能的效果图：
③以center为基点旋转的效果图：
④以top为基点旋转的效果图：
⑤以top left为基点旋转的效果图：
⑥以right top为基点旋转的效果图：
⑦以left为基点旋转的效果图：
⑧以right为基点旋转的效果图：
⑨以bottom left为基点旋转的效果图：
⑩以bottom为基点旋转的效果图：
⑪以bottom right为基点旋转的效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
网友评论