css3中transform属性实现的4种功能


Posted in HTML / CSS onAugust 07, 2021

在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

1、浏览器支持

到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  

2、旋转

使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。

transform:rotate(45deg);

3、缩放

使用scale方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。

transform:scale(0.5);//缩小一半

(1)可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率

transform:scale(0.5,2);//水平方向缩小一半,垂直方向放大一倍。

4、倾斜

使用skew方法实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

transform:skew(30deg,30deg);//水平方向上倾斜30度,垂直方向上倾斜30度。

(1)只使用一个参数,省略另一个参数

这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。

transform:skew(30deg);

5、移动

使用translate方法来移动文字或图像,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

transform:translate(50px,50px);//水平方向上移动50px,垂直方向上移动50px

(1)只使用一个参数,省略另一个参数

这种情况下视为只在水平方向上移动,垂直方向上不移动。

transform:translate(50px);

6、对一个元素使用多种变形的方法  

transform:translate(150px,200px)rotate(45deg)scale(1.5);

7、指定变形的基准点

在使用transform方法进行文字或图像变形的时候,是以元素的中心点为基准点进行变形的。

transform-origin属性

使用该属性,可以改变变形的基准点。

transform:rotate(45deg);
transform-origin:leftbottom;//把基准点修改为元素的左下角

(1)指定属性值
基准点在元素水平方向上的位置:left、center、right
基准点在元素垂直方向上的位置:top、center、bottom

8、3D变形功能

(1)旋转

分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转,在参数中加入角度值,角度值后面跟表示角度单位的deg文字即可,旋转方向为顺时针旋转。

transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotateX(45deg)rotateY(45deg)rotateZ(45deg);
transform:scale(0.5)rotateY(45deg)rotateZ(45deg);

(2)缩放

分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放,在参数中指定缩放倍率。

transform:scaleX(0.5);
transform:scaleY(1);
transform:scaleZ(2);
transform:scaleX(0.5)scaleY(1);
transform:scale(0.5)rotateY(45deg);

(3)倾斜

分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜(无skewZ方法),在参数中指定倾斜的角度

transform:skewX(45deg);
transform:skewY(45deg);

(4)移动

分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动,在参数中加入移动距离。

transform:translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);

9、变形矩阵

每种变形方法的背后都存在着一个对应的矩阵。

(1)计算2D变形(3X3矩阵)

\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}

可以将这个2D变形矩阵书写为matrim(a,b,c,d,e,f),a~f均代表一个数字,用于决定怎样执行变形处理。

(2)平移的2D矩阵

\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}
//效果一致:右移150px,下移150px
transform:matrix(1,0,0,1,150,150);
transform:translate(150px,150px);

(3)计算3D变形

3D缩放变形使用的4X4矩阵

\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//效果一致:X轴方向上缩小五分之一,Y轴方向上缩小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

(4)可通过矩阵执行多重变形处理

将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。

到此这篇关于css3中transform属性实现的4种功能的文章就介绍到这了,更多相关css3中transform属性实现内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 #HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 #HTML / CSS
CSS 实现Chrome标签栏的技巧
纯html+css实现Element loading效果
纯html+css实现奥运五环的示例代码
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Ubuntu下安装PyV8
2016/03/13 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
法律专业实习鉴定
2013/12/22 职场文书
学习决心书
2014/03/11 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
80后婚前协议书范本
2014/10/24 职场文书
村官个人总结范文
2015/03/03 职场文书
入党介绍人考察意见
2015/06/01 职场文书