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

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

HTML / CSS 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 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
You might like
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
Python 变量类型详解
2018/10/10 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
模范家庭事迹材料
2014/02/10 职场文书
给学校建议书范文
2014/05/13 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
python计算列表元素与乘积详情
2022/08/05 Python