首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onDecember 27, 2017

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功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

ZJL_Sunny

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
css3的动画特效之动画序列（animation）
Dec 22 #HTML / CSS
css3实现多个元素依次显示效果
Dec 12 #HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 #HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 #HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 #HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 #HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 #HTML / CSS
分区(2) 静态压缩(1) router(1) 自动播放(1) 路由(1) 驱动模型(1) 抽象类(1) 接口(1) 正则表达式(3) 乱码(3)
You might like
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
删除重复数据的算法
2006/11/23 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python爬虫入门教程--正则表达式完全指南（五）
2017/05/25 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
雅诗兰黛加拿大官网：Estee Lauder加拿大
2019/07/31 全球购物
戴森比利时官方网站：Dyson BE
2020/10/03 全球购物
工作交流会欢迎词
2014/01/12 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
债务授权委托书范本
2014/10/17 职场文书
学生评语集锦
2015/01/04 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
导游词之临安白水涧
2019/11/05 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
python井字棋游戏实现人机对战
2022/04/28 Python