1. 首页
  2. IT资讯

「css基础」如何理解transform的matrix()用法

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F2b49394905954ff29bf10cd20d065558″ img_width=”1140″ img_height=”625″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E实现炫酷的网页动画效果,自然少不了css3中transform的属性,此属性功能丰富且强大,比如实现元素的位移translate(x,y),缩放scale(x,y),2d旋转rotate(angle),倾斜变换skew(x-angle,y-angle)等,利用这些属性可以实现基本的动画效果,如果你要实现自定义和像素级别控制的高级动画效果,我们还需要深入了解它的另外一个属性——matrix,matrix就是矩阵的意思,听起来是不是很高级,你没听错实现更高级的效果,你需要了解“矩阵”,听到“矩阵”,是不是很惊慌,当初笔者学习线性代数时也甚是无聊,真不知道这么课有啥用,没想到这门课的在计算机应用领域应用十分广泛,比如今天说的动画效果,还有现在火爆的人工智能,真是悔不当初,当时没有好好学习这么课程。u003Cu002Fpu003Eu003Cpu003E今天笔者将从以下几个方面进行介绍:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E向量与矩阵基础介绍u003Cu002Fliu003Eu003Cliu003Ematrix()示例u003Cu002Fliu003Eu003Cliu003Ematrix参数详细介绍u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E向量与矩阵基础介绍u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E关于这部分内容,有线性基础的同学们可以忽略往下看,在这里笔者只会介绍最基础的内容,什么是向量和矩阵,以及对应的基础运算。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E向量u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E向量被用于许多科学领域用来描述方向和大小,我们一般用笛卡尔坐标系进行向量的描述,向量简单的来说就是把数排成一列或一行进行展示,比如向量(2,1)和(3,3)在坐标系中表示如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F49706cdc1ce34f439c396b5faee4bc94″ img_width=”699″ img_height=”419″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E假设我们现在有两个向量AB(8,2)和向量AC(2,6),我们对其进行加、减、乘,示例如下:u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E向量加法:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EAB+AC=ADu003Cu002Fpu003Eu003Cpu003E(8,2)+(2,6)=(8+2,2+6)=(10,8)u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc76acf1e1d744437a16c5142b87d1845″ img_width=”825″ img_height=”668″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E向量减法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EAB-AC= ADu003Cu002Fpu003Eu003Cpu003E(8,2)-(2,6)=(8-2,2-6)=(6,-4)u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F6457b20a23624fa0a9b0b44a22451b9d” img_width=”825″ img_height=”769″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E向量乘法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EAB✖️AC = ADu003Cu002Fpu003Eu003Cpu003E(8,2)✖️(2,6)=(8✖️2,2✖️6)=(16,12)u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Feb28b182268b48b08a5840b26020e676″ img_width=”825″ img_height=”498″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E矩阵u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E简单来说把数排列成长方形就是矩阵,我们一般用几行几列来描述矩阵,比如 2✖️2 矩阵,2✖️3 矩阵等,乘号左边代表行数,乘号右边代表列数,如下图所示表示2✖️2 的矩阵:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F2c41a5bb01884846b00e43288aabad2c” img_width=”386″ img_height=”266″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E矩阵相加u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E相同规模(行数列数都相等)的矩阵之间的加法如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F605f0c99c47941ae96fafbf7ebfdf547″ img_width=”1260″ img_height=”386″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E我们可以看出是对应的位置两两相加而得。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E矩阵相乘u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E1、矩阵与向量相乘,示意图如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F8a81f9d38b0b4eef80adb3845a395021″ img_width=”1620″ img_height=”227″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从图可以看出矩阵每行对应的位置与向量每行对应的位置分别相乘最后将结果相加,得到结果每行对应的数字。u003Cu002Fpu003Eu003Cpu003E2、矩阵与矩阵相乘u003Cu002Fpu003Eu003Cpu003E比如 2✖️4 的矩阵与 4️✖️3 的矩阵相乘我们得到一个 2✖️3的矩阵,如下图所示u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fd5bc29dc049845259b269f70f84902f5″ img_width=”1612″ img_height=”616″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从图示中我们可以看出,我们左边矩阵的每行与右边矩阵的每列分别相乘,相乘规则如矩阵与向量相乘的规则一样,最终得到矩阵的行数等于左边矩阵的行数,列数等于右边矩阵的列数。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ematrix()示例u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E介绍完基本向量和矩阵的知识后,我们来看看transform的matrix()应用举例,transform:matrix(a,b,c,d,tx,ty)一共六个参数,用矩阵表示如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcdd742942b184da58074cff3c3c9fac3″ img_width=”328″ img_height=”192″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E注:参数书写的方向是竖着写的。u003Cu002Fpu003Eu003Cpu003E这六个参数代表什么意思,这里先不做介绍,稍后会详细介绍,我们先从一个例子的应用来讲起,现在我们有这样一个元素,其对应的CSS属性如下:u003Cu002Fpu003Eu003Cpreu003E#transformedObject {u003Cbru003E position: absolute;u003Cbru003E left: 0px;u003Cbru003E top: 0px;u003Cbru003E width: 200px;u003Cbru003E height: 80px;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E此段代码,对应的页面效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F4f00b846657c4594abcbedaa842c6ebe” img_width=”824″ img_height=”396″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从此图我们可以看出,此长方形的四个顶点从左上顺时针分别为:(0,0),(200,0),(200,80),(0,80),我们对其进行transform:matrix(0.9, -0.05, -0.375, 1.375, 220, 20)的变换,css代码如下:u003Cu002Fpu003Eu003Cpreu003E#transformedObject {u003Cbru003E position: absolute;u003Cbru003E left: 0px;u003Cbru003E top: 0px;u003Cbru003E width: 200px;u003Cbru003E height: 80px;u003Cbru003E transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20);u003Cbru003E transform-origin: 0 0;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E注:transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;u003Cu002Fpu003Eu003Cpu003E应用变换后的效果如下图u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F0c56ac202b8d419895e5998f368df3ab” img_width=”762″ img_height=”366″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E这四个点的值,是怎么得出来的呢,其实有了前面的向量和矩阵知识,我们很容易算出,matrix(0.9, -0.05, -0.375, 1.375, 220, 20)对应的矩阵如下图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fd44e50e3d63843bf98a125dc734e9441″ img_width=”394″ img_height=”170″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E元素最初的每个点相当一个向量,例如(200,0)可表示如下图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F7035fecf48d44bebad38bbe16a679884″ img_width=”110″ img_height=”178″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E变换后的四个点,其实是matrix(0.9, -0.05, -0.375, 1.375, 220, 20)对应的矩阵与原始四个点对应的向量分别相乘而得,具体的运算过程如下图:u003Cu002Fpu003Eu003Cpu003E与(200, 80)相乘的运算过程得到(370,120):u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fde88b348b2d64402befe63a7b0973469″ img_width=”1620″ img_height=”555″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E与(200, 0)相乘得到(400,10):u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fad689e180eb44e0e8deb33f73837e375″ img_width=”1620″ img_height=”230″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E与(0, 80)相乘得到(190,130):u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F4237c0105f874998bce06ae8f61d95f0″ img_width=”1620″ img_height=”225″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E与(0,0)相乘得到(220,20):u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F8a81f9d38b0b4eef80adb3845a395021″ img_width=”1620″ img_height=”227″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E经过运算后,我们最终变换后的四个点: (220,20),(400,10),(370,120),(190,130)u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ematrix参数详细介绍u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E上一小节,我们学习了如何利用向量和矩阵的知识,我们算出了元素经过matrix()变换后的最终结果,现在我们详细介绍下transform:matrix(a,b,c,d,tx,ty)这六个参数的意义,其实这六个参数,对应的是translate(x,y),scale(x,y),rotate(angle),skew(x-angle,y-angle)这些效果,每种变换效果对应的参数不同,如下图总结:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F3057d6585144483783b8b087a67df3d2″ img_width=”1564″ img_height=”548″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E假如我们对元素进行旋转15度,往右动230px, X轴方向延长1.5倍,我们使用基本的变换属性代码下:u003Cu002Fpu003Eu003Cpreu003E#o1 {u003Cbru003E transform-origin: 0px 0px;u003Cbru003E transform: rotate(15deg) translateX(230px) scaleX(1.5);u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E如果用transform:matrix()怎么实现如上的最终效果,其实我们可以利用笔者针对transform:matrix(a,b,c,d,tx,ty)这六个参数对应的总结(如上图),其实就是每个变换对应的矩阵参数相乘的结果得到这6个参数值,记住一定要按照rotate,translateX,scaleX对应的顺序进行举行相乘,如下图所示(运算的结果笔者就不写了,留给大家练习下矩阵相乘)u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff893922ad2a94d028329a390e5c679b8″ img_width=”1124″ img_height=”254″ alt=”「css基础」如何理解transform的matrix()用法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E今天的内容就到这里,我们了解了transform除了有translate(x,y),scale(x,y),rotate(angle),skew(x-angle,y-angle)这些属性实现动画变换,还有一个高级属性matrix(),通过这个属性我们了解其背后的数学逻辑,只有掌握这个属性后,我们才能实现更为复杂的动画。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E更多精彩内容,请微信关注”前端达人”公众号!u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「css基础」如何理解transform的matrix()用法

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10814.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code