客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。 1、如何使用transform功能： （1）在CSS3中通过transform属性来实现transform功能： （2）transform功能使用方法： 2、rotate旋转，在参数中规定角度（rotate表示的是顺时针旋转，deg是CSS3中的角度单位）： （1）使用方法： （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*/ （2）可能的值： 1）scale(x,y)使元素X轴和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(角度);它的值是角度； （2）可能的值： 1）skew(x,y)使元素在水平方向和垂直方向同时扭曲(X轴和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(值);它的值是指定移动的距离； （2）可能的值： （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; （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）可能的值：
（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为基点旋转的效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论