矩阵matrix变换的用法(css3属性transform: matrix)
参数
2D矩阵的表示 matrix(a,b,c,d,e,f),其中6个参数在矩阵的分布:
—— ——
| a c e |
| b d f |
| 0 0 1 |
—— ——
在CSS3中矩阵的原始值是这样的:
transform: matrix(1,0,0,1,0,0);
任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1)
矩阵平移
matrix(1,0,0,1,e,f)
e: 矩阵x坐标平移值,正向平移e
f: 矩阵y坐标平移值,正向平移f
css3中方向,单位为px
|
|
--------->x
|
↓y
结论:平移只有跟e和f有关系,跟其他a,b,c,d没有关系,e对应x轴的平移,f对应y轴的平移,往正方向平移多少单位就加上多少单位,反之则减去多少个单位。
矩阵缩放
matrix(a,0,0,d,0,0)
a: 矩阵宽度缩放a倍,默认为1不缩放
d: 矩阵高度缩放d倍,默认为1不缩放
结论:缩放只有跟a和d有关系,跟其他数值都无关,a对应x轴缩放,d对应y轴缩放,缩放多少倍就乘以多少
矩阵旋转
matrix(cosθ,sinθ,-sinθ,cosθ,0,0);
sinθ和cosθ最大值为1 最小值为-1,当a b c f四个参数符合公式的规律是则为旋转
往顺时针方向旋转45°
a = cos45° = 0.707
b = sin45° = 0.707
c = -sin45° = -0.707
d = con45° = 0.707
matrix(0.707,0.707,-0.707,0.707,0,0);
往顺时针方向旋转90°
a = cos90° = 0
b = sin90° = 1
c = -sin90° = -1
d = con90° = 0
matrix(0,1,-1,0,0,0);
往顺时针方向旋转180°
a = cos180° = -1
b = sin180° = 0
c = -sin180° = 0
d = con180° = -1
matrix(0,1,-1,0,0,0);
结论:得知旋转的度数,根据用sin cos算出相应的值填写
矩阵拉伸
matrix(1,tanθ,tanθ,1,0,0)
b:矩阵以X轴做偏移,偏移后X轴和右边的角度Y°,tanY° = b的值 (左边不变,右边向Y正方向偏远)
c:矩阵以Y轴做偏移,偏移后Y轴和左边的角度X°,tanX° = c的值 (底边不变,顶边向X正方向偏远)
matrix(1,2,0,1,0,0)
matrix(1,0,2,1,0,0)
参考
详细及原理请参考文章:
对CSS3中的transform:Matrix()矩阵的一些理解
https://www.cnblogs.com/Ivy-s/p/6786622.html
理解CSS3 transform中的Matrix(矩阵)
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
矩阵matrix变换的用法(css3属性transform: matrix)的更多相关文章
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3属性transform详解【转载】
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3属性transform详解
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- CSS3形变——transform与transform-origin画时钟
css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
- css3之transform的应用
一.利用transform实现图片额外显示 效果图如下 初始状态:
- Flash:DisplayObject的transform/matrix的潜规则、小bug
AS3中,使用DisplayObject的transform/matrix,需要先clone出来,再变换,再赋值回去,这样才会对DisplayObject产生影响,不能直接对原Matrix操作. ...
- CSS3动画属性Transform解读
无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...
随机推荐
- 使用FluentEmail发送outlook邮件
一,邮箱账号相关设置 1,创建outLook邮箱. 2,进入邮箱设置->同步电子邮件->允许设备和应用使用pop 3,设置microsoft账号的应用程序密码->进入安全性页面-&g ...
- 深入浅出Java并发中的CountDownLatch
1. CountDownLatch 正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中 ...
- react-native-swiper使用的坑
今天使用引入react-native-swiper组件使用轮播图时,发现报如下错误: Invarint Violation:ViewPagerAndroid has been removed from ...
- Python 多态与抽象类
一.多态 1.1 什么是多态 多态也称"多态性",指的是同一种类型的事物,不同的形态. 在python中的多态指的是让多种类若具备类似的数据属性与方法属性,都统一好命名规范,这样可 ...
- rapidxml遍历子节点例子
<?xml version="1.0" encoding="utf-8"?> <luaword> <btn> <inf ...
- linux入门系列2--CentOs图形界面操作及目录结构
上一篇文章"linux入门系列1--环境准备及linux安装"直观演示了虚拟机软件VMware和Centos操作系统的安装,按照文章一步一步操作,一定都可以安装成功.装好系统之后, ...
- hadoop上下文信息获取方法
import java.io.IOException; import java.net.URI; import org.apache.hadoop.conf.Configuration; import ...
- 天天都在用Git,那么你系统学习过吗?(一)学习过程
你系统学习Git了吗? 使用Mac编程的好处,不是因为Mac长得好看 Git内容学习准备 如果你还没有用Git,就不要写代码了. GitHub仓库的使用. 新员工入职的时候,会让他先用一周的时间去学习 ...
- Java五子棋小游戏(控制台纯Ai算法)
Java五子棋小游戏(控制台纯Ai算法) 继续之前的那个五子棋程序 修复了一些已知的小Bug 这里是之前的五子棋程序 原文链接 修复了一些算法缺陷 本次增加了AI算法 可以人机对战 也可以Ai对Ai看 ...
- 原生javascript实现仿QQ延时菜单
一.实现原理 定时器和排他思想 二.代码 <!DOCTYPE html> <html> <head> <title></title> < ...