今天小编跟大家讲解下有关浅谈CSS3中的变形功能-transform功能 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈CSS3中的变形功能-transform功能 的相关资料，希望小伙伴们看了有所帮助。
CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。
1、如何使用transform功能：
（1）在CSS3中通过transform属性来实现transform功能：
（2）transform功能使用方法：transform:功能;-ms-transform:功能; -moz-transform:功能;-webkit-transform:功能;-o-transform:功能;
2、rotate旋转 在参数中规定角度（rotate表示的是顺时针旋转 deg是CSS3中的角度单位）：
（1）使用方法：-ms-transform:rotate(角度); -moz-transform:rotate(角度);-webkit-transform:rotate(角度);-o-transform:rotate(角度);
（2）rotate旋转的应用：
1）HTML代码：
<div></div>2）CSS代码：
div{ width: 300px; height: 300px; background-color: lightblue; -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); }3）效果图如下：
3、scale缩放转换：
（1）使用方法：transform:scale(值) 他的值是指定的缩放倍率 比如0.5就是缩放50% 1就是缩放100% 1.5就是缩放150%；
-ms-transform:scale(值); -moz-transform:scale(值);-webkit-transform:scale(值);-o-transform:scale(值);
（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; -ms-transform:scale(2,2); -moz-transform:scale(2,2); -webkit-transform:scale(2,2); -o-transform:scale(2,2); }3）效果图如下：
①未缩放时的效果图：
②缩放值X与Y为正整数时的效果图：
③缩放值X与Y均为小于1的浮点数时的效果图：
④缩放值仅X为小于1的浮点数时的效果图：
⑤缩放值仅Y为小于1的浮点数时的效果图：
4、倾斜skew：
（1）使用方法：
transform:skew(角度);它的值是角度；-ms-transform:skew(角度); -moz-transform:skew(角度);-webkit-transform:skew(角度);-o-transform:skew(角度);
（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; -ms-transform:skew(30deg,30deg); -moz-transform:skew(30deg,30deg); -webkit-transform:skew(30deg,30deg); -o-transform:skew(30deg,30deg); }3）效果图如下：
①未倾斜的效果图：
②X轴与Y轴均倾斜的效果图：
③设置一个值相当于仅X轴倾斜的效果图：
④仅X轴倾斜的效果图：
⑤仅Y轴倾斜的效果图：
5、移动translate：
（1）使用方法：
transform:translate(值);它的值是指定移动的距离；-ms-transform:translate(值); -moz-transform:translate(值);-webkit-transform:translate(值);-o-transform:translate(值);
（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; -ms-transform:translate(50px,50px); -moz-transform:translate(50px,50px); -webkit-transform:translate(50px,50px); -o-transform:translate(50px,50px); }3）效果图如下：
①未移动的效果图：
②在X轴与Y轴上均移动时的效果图：
③设置一个值相当于仅在X轴上移动时的效果图：
④仅在X轴上移动时的效果图：
⑤仅在Y轴上移动时的效果图：
6、对一个元素使用多种变形方法：(同样的方法只能使用一次)
（1）使用方法：
transform:方法1 方法2 方法3 方法4;-ms-transform:方法1 方法2 方法3 方法4; -moz-transform:方法1 方法2 方法3 方法4;-webkit-transform:方法1 方法2 方法3 方法4;-o-transform:方法1 方法2 方法3 方法4;
（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); -moz-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5); -webkit-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5); -o-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5); }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); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); transform-origin: center; }3）效果图如下：
①未添加变形功能的效果图：
②添加旋转功能的效果图：
③以center为基点旋转的效果图：
④以top为基点旋转的效果图：
⑤以top left为基点旋转的效果图：
⑥以right top为基点旋转的效果图：
⑦以left为基点旋转的效果图：
⑧以right为基点旋转的效果图：
⑨以bottom left为基点旋转的效果图：
⑩以bottom为基点旋转的效果图：
⑪以bottom right为基点旋转的效果图：
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
