如何优雅的使用css3的矩阵变换matrix(矩阵)

Ali_ 发布于2019-08-29 13:11 / 2250人阅读

摘要：旋转是可以理解为旋转规律的缩放规律的斜切这里的意思是旋转可以用缩放和斜切一起用来得到两者联系在于这个角度。

在写文章的开始首先致谢张鑫旭大神的一篇文章：《理解CSS3 transform中的Matrix(矩阵)》，因为这篇文章给了我很大的启发，虽然文章写得足够清晰明了但是对于我这个不懂矩阵的人还是很难使用上matrix 这个高大上的玩意儿！如果你不懂矩阵也没关系！

一、概念

matrix其实是可以代替：偏移量（translate）,缩放（scale），斜切（skew），旋转（rotate），四大功能的，任意一个matrix样式改变而来的形状也都能通过以上四个功能实现，它们是互通的。

二、理解

假定matrix的六个参数用字母表示如下：transform: matrix(a,b,c,d,e,f);

e和f 代表着偏移量translate，x和y轴

a和d 代表着缩放比例scale,x 和y轴

b和c 代表着斜切skew（具体参数和角度关系为, b-->tanθ y轴 c-->tanθ x轴 ,我们具体操作的时候还是要使用小数的）

abcd 中的ad代表缩放(scale),bc代表者斜切(skew); abcd四个参数代表着旋转，这你可能难以理解，请继续往下看。

旋转是可以理解为, 旋转=规律的缩放+规律的斜切 这里的意思是旋转可以用缩放和斜切一起用来得到, 两者联系在于这个角度θ。具体如下：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

然后你就知道了，为啥6个数能做到，translate，scale，skew，rotate了，因为一个对应两个参数，原来最后一个rotate 被缩放和斜切给替代了(看到这里建议去看看实例中，如何用矩阵实现旋转的，还有斜切和缩放如何实现旋转。)





理解矩阵变换

三、rotate占用了四个参数，skew跟scale怎么办

Matrix( a , b , c , d , e , f );
直接先旋转算出abcd的值，再算出skew对应的bc，scale中的ad，然后加一起就可以实现矩阵实现多个变换了，别忘了正负符号

最后一个ef就是偏移量，多带带处理即可！这样大家书写Matrix的六个参数就非常的简单的了。
Matrix(a1+a2 , b1+b2 , c1+c2 , d , f);

云服务器 GPU云服务器 python矩阵变换最快的矩阵乘法算法大数据的矩阵计算基础矩阵的秩c语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112433.html

transform与Matrix矩阵

摘要：每个线性函数使用矩阵描述，如将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了可以在一行中进行多次矩阵乘法进行变换有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如旋转缩放或拉伸。事实上，所有线性函数的变换都可以被描述。问题引入 1. .box1{ position: absolute; top: 0; left: 0; width...

import. 2019-08-01 17:57 评论0 收藏0
transform与Matrix矩阵

摘要：每个线性函数使用矩阵描述，如将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了可以在一行中进行多次矩阵乘法进行变换有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如旋转缩放或拉伸。事实上，所有线性函数的变换都可以被描述。问题引入 1. .box1{ position: absolute; top: 0; left: 0; width...

sean 2019-08-29 13:46 评论0 收藏0
CSS3 变换

摘要：概览变换也叫转换，主要包括以下几种旋转扭曲缩放和移动以及矩阵变形。变换没有扭曲操作，有移动，旋转，缩放。三，取消的变换，将变换应用到上并置于缩放前，改变缩放值，没有任何变化。概览 CSS3 变换也叫 2D/3D转换，主要包括以下几种：旋转(rotate) 、扭曲 (skew) 、缩放(scale) 和移动(translate) 以及矩阵变形(matrix) 。transform ...

wayneli 2019-08-28 18:22 评论0 收藏0
HTML5中手势原理分析与数学知识的实践

摘要：中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。这篇博文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。 HTML5中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能...

rollback 2019-08-20 18:33 评论0 收藏0
使用css实现任意大小，任意方向，任意角度的箭头

摘要：使用实现任意大小，任意方向，任意角度的箭头网页开发中，经常会使用到下拉箭头，右侧箭头这样的箭头。的和就是箭头的边长，通过调整可以获取任意边长的箭头。使用css实现任意大小，任意方向，任意角度的箭头网页开发中，经常会使用到下拉箭头showImg(https://segmentfault.com/img/remote/1460000013517628?w=72&h=60);，右侧箭...

MorePainMoreGain 2019-08-30 14:05 评论0 收藏0