首页
所有分类
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动画animation实现云彩向左滚动
May 09 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
css弧边选项卡的项目实践
May 07 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
主从复制(1) ESXI(1) Master(1) caddy(1) SVN(1) 表约束(2) transaction(1) Slave(1) NginxConfig(1) 共享文件夹(1)
You might like
PHP的FTP学习（一）[转自奥索]
2006/10/09 PHP
关于PHP中的Class的几点个人看法
2006/10/09 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
javascript编程起步（第六课）
2007/01/10 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jquery选择器使用详解
2014/04/08 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
深入理解React高阶组件
2017/09/28 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python使用chardet判断字符编码
2015/05/09 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python实现超市商品销售管理系统
2019/10/25 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Auguste The Label官网：澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
当我正在为表建立索引的时候，SQL Server 会禁止对表的访问吗
2014/04/28 面试题
Java基础面试题
2012/11/02 面试题
关于旅游的活动方案
2014/08/15 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
python实现简单区块链结构
2021/04/25 Python
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js