CSS3中transform的matrix是什么

這篇文章主要介紹了CSS3中transform的matrix是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS3中transform的matrix是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

前言

CSS3 中使用 transform 可以對(duì)元素進(jìn)行變換。其中包含：位移、旋轉(zhuǎn)、偏移、縮放。 transform 可以使用 translate/rotate/skew/scale 的方式來(lái)控制元素變換，也可以使用 matrix 的方式來(lái)控制元素變換。

比如：

<div class="box"></div>

通過(guò)transform屬性進(jìn)行變換。

首先演示使用 translate/rotate/skew/scale 的方式：

.box {

    width: 100px;

    height: 100px;

    background: #00C487;

    transform: translate(10px, 20px) rotate(30deg) scale(1.5, 2);

}

也可以使用 matrix 的方式：

.box {

    width: 100px;

    height: 100px;

    background: #00C487;

    transform: matrix(0.75, 0.8, -0.8, 1.2, 10, 20);

}

查看demo

Matrix 的中文是矩陣，是一個(gè)數(shù)學(xué)術(shù)語(yǔ)，在計(jì)算機(jī)科學(xué)中，會(huì)用矩陣來(lái)對(duì)象量進(jìn)行變換，在 CSS3 的 transform 屬性中，可以使用矩陣對(duì)圖像進(jìn)行變換。

矩陣長(zhǎng)什么樣子？

矩陣可以分為一個(gè)形容詞+一個(gè)名字，矩是形容詞，陣是名詞。

如果你喜歡看戰(zhàn)爭(zhēng)片，不管是古代戰(zhàn)爭(zhēng)還是現(xiàn)代戰(zhàn)爭(zhēng)，都需要有陣勢(shì)，打仗沒(méi)陣型，等于耍流氓；或者是開(kāi)一局農(nóng)藥，可能也要考慮各個(gè)英雄的站位，各種球類運(yùn)動(dòng)、各種棋類都需要有陣型。

陣型中的每一個(gè)個(gè)體對(duì)整體的都會(huì)產(chǎn)生影響。比如打王者榮耀射手時(shí)候，射手應(yīng)該猥瑣在一個(gè)位置輸出，站錯(cuò)位置，輸?shù)粽麄€(gè)游戲。

那，其實(shí)矩陣就是一些列的數(shù)字按照矩形排列。

在數(shù)學(xué)中，矩陣用方括號(hào)包裹起來(lái)。

上圖就是一個(gè)矩陣。

CSS3 里的 matrix 如何和矩陣對(duì)應(yīng)呢？

為什么要用矩陣來(lái)表示轉(zhuǎn)換呢？因?yàn)樵谟?jì)算機(jī)科學(xué)中，矩陣可以對(duì)向量進(jìn)行轉(zhuǎn)換。矩陣中的每一個(gè)數(shù)字，對(duì)向量的轉(zhuǎn)換都會(huì)產(chǎn)生影響。

CSS3 里面可以用矩陣表示 2D 和 3D 轉(zhuǎn)換，這里只講 2D。

selector {

    transform: matrix(a, b, c, d, e, f);

}

2D 的轉(zhuǎn)換是由一個(gè) 3*3 的矩陣表示的，前兩行代表轉(zhuǎn)換的值，分別是 a b c d e f，要注意是豎著排的，第一行代表 x 軸發(fā)生的變化，第二行代表 y 軸發(fā)生的變化，第三行代表 z 軸發(fā)生的變化，因?yàn)檫@里是 2D 不涉及 z 軸，所以這里是 0 0 1。

假設(shè)一個(gè)問(wèn)題

創(chuàng)建一個(gè)寬高為 200px 的div，div 里面有一個(gè)紅色的點(diǎn)，位置是{x:181px y:50px}。

倘若將這個(gè)div 向右平移 10px，x 軸向下平移 20px，旋轉(zhuǎn)37&deg;，x軸縮放 1.5 倍，y 軸縮放 2 倍：

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

那么紅色點(diǎn)的變化后的位置在哪里呢？

既然我們知道矩陣可以對(duì)向量進(jìn)行轉(zhuǎn)換那么我們只要把上面的信息轉(zhuǎn)換成矩陣信息，通過(guò)矩陣信息可以將我們的原始坐標(biāo)轉(zhuǎn)換到新的坐標(biāo)。

縮放 scale(x, y)

縮放對(duì)應(yīng)的是矩陣中的 a 和 d，x 軸的縮放比例對(duì)應(yīng) a，y 軸的縮放比例對(duì)應(yīng) d。

transform: scale(x,y);

a=x d=y

所以 scale(1.5, 2) 對(duì)應(yīng)的矩陣是：

transform: matrix(1.5, 0, 0, 2, 0, 0);

如果一個(gè)沒(méi)有元素沒(méi)有被縮放，默認(rèn)a=1 d=1。

平移 translate(10, 20)

平移對(duì)應(yīng)的是矩陣中的 e 和 f，平移的 x 和 y 分別對(duì)應(yīng) e 和 f。

transform: translate(10, 20)

e=10

f=20

對(duì)應(yīng)： transform: matrix(a, b, c, d10, 20);

結(jié)合縮放： transform: matrix(1.5 0, 0, 2, 10, 20);

平移只會(huì)影響 e 和 f 值。

旋轉(zhuǎn) rotate(&theta;deg)

旋轉(zhuǎn)影響的是a/b/c/d四個(gè)值，分別是什么呢？

transform: rotate(&theta;deg)

a=cos&theta;

b=sin&theta;

c=-sin&theta;

d=cos&theta;

這個(gè)是高中學(xué)的哦&mdash;&mdash;

如果要計(jì)算 30&deg; 的sin值：

首先我們要將 30&deg; 轉(zhuǎn)換為弧度，傳遞給三角函數(shù)計(jì)算。用 JS 計(jì)算就是下面的樣子了。

// 弧度和角度的轉(zhuǎn)換公式：弧度=&pi;/180&times;角度 

const radian = Math.PI / 180 * 30 // 算出弧度

const sin = Math.sin(radian) // 計(jì)算 sin&theta;

const cos = Math.cos(radian) // 計(jì)算 cos&theta;

console.log(sin, cos) // 輸出 &asymp; 0.5, 0.866

這樣我們算出了 sin 和 cos，分別是 0.5 和 0.866

如果我們不考慮縮放和偏移，只旋轉(zhuǎn)30&deg;，矩陣應(yīng)該表示為

transform: rotate(30deg)

a=0.866

b=0.5

c=-0.5

d=0.866

transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);

關(guān)于“CSS3中transform的matrix是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS3中transform的matrix是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。