国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

transform與Matrix矩陣

sean / 1319人閱讀

摘要：每個(gè)線性函數(shù)使用矩陣描述，如將矩陣乘法用于上述坐標(biāo)系中的每個(gè)點(diǎn)，一個(gè)變換就形成了可以在一行中進(jìn)行多次矩陣乘法進(jìn)行變換有了這種方法，就可以描述大部分常見的變換并因此可以將他們組合起來，如旋轉(zhuǎn)縮放或拉伸。事實(shí)上，所有線性函數(shù)的變換都可以被描述。

問題引入 1. 
.box1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background: black;
    transform: rotate(45deg) translate(300px,300px) ;
}
.box2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background:black;
    transform: translate(300px,300px) rotate(45deg) ;
}

可以看到通過transform設(shè)置的translate和rotate，2個(gè)盒子由于先后順序不同，但是差別卻很大。

2. 
.test{
  width: 20px;
  height: 140px;
  background-color: salmon;
  position: absolute;
  top: 500px;
  left: 500px;
  transform: rotate(90deg);
  transform: scale(0.5);
}
.test:hover
{
    transform: rotate(45deg);
}

hover后：

可以看到 hover后transform: rotate(45deg)； 使得一開始設(shè)置的scale恢復(fù)了初始值1。
由此可見，transform 是組件化的，其中的2D圖像變化并不只是單純的skew(),scale(),rotate()，translate()等

Matrix matrix()

CSS 函數(shù) matrix() 用六個(gè)指定的值來指定一個(gè)均勻的二維（2D）變換矩陣。這個(gè)矩形中的常量值是不作為參數(shù)進(jìn)行傳遞的，其他的參數(shù)則在主要列的順序中描述。
舉個(gè)例子

transform: "translate(tx,ty) rotate(a) skew(b) scale(sx.sy)"

代表將坐標(biāo)系先 translate 然后 rotate 然后 skew 然后 scale 為新的坐標(biāo)系。即新坐標(biāo)系下的點(diǎn)先經(jīng)過 scale 然后 skew 然后 rotate 然后 translate 后對(duì)應(yīng)于老坐標(biāo)系下的點(diǎn)。

那Matix是如何運(yùn)算的呢？ 
引用文字

在笛卡爾坐標(biāo)系中，每個(gè) 歐氏空間 里的點(diǎn)都由橫坐標(biāo)和縱坐標(biāo)這兩個(gè)值來確定。 在CSS（和大部分的計(jì)算機(jī)圖形學(xué)）中，原點(diǎn) (0, 0) 在元素的左上角。每個(gè)點(diǎn)都使用數(shù)學(xué)上的向量符號(hào)(x,y)來描述。

每個(gè)線性函數(shù)使用 2 × 2 矩陣描述，如:

     [a c]
     [b d]

將矩陣乘法用于上述坐標(biāo)系中的每個(gè)點(diǎn)，一個(gè)變換就形成了：

可以在一行中進(jìn)行多次矩陣乘法進(jìn)行變換：

有了這種方法，就可以描述大部分常見的變換并因此可以將他們組合起來，如：旋轉(zhuǎn)、縮放或拉伸。（事實(shí)上，所有線性函數(shù)的變換都可以被描述。）組合的變換是從右到左生效的。然而，有一種常見的變換并不是線性的，所以當(dāng)這種變換要用這種方法來表示時(shí)，應(yīng)該被多帶帶列出來：位移。位移的向量 (tx, ty) 必須多帶帶表示，作為兩個(gè)附加參數(shù)。

而上面的例子可以寫成

顯而易見的
tranmsform的屬性是由Matrix矩陣通過參數(shù)計(jì)算出來

計(jì)算方法 
translate(tx,ty)
transform: matrix(1, 0, 0, 1, tx, tx)

這兩個(gè)是等價(jià)的 ， 意味著translate的兩個(gè)參數(shù) ，被transform放到了第五個(gè)和第六個(gè)參數(shù)中計(jì)算。

同樣的

scale(sx, sy)
matrix(sx, 0, 0, sy, 0, 0)

這兩個(gè)也是等價(jià)的

如果是旋轉(zhuǎn)rotate(),則要用到三角函數(shù)

rotate(θ)
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

skew()則是使用tan()

skew(θ)
matrix(1,tan(θy),tan(θx),1,0,0)

再通過上面的矩陣相乘公式，可以算得Matrix函數(shù)參數(shù)值

問題1中，可以表達(dá)成 
    
   [1,0,300]    [cos45°， -sin(45°) ,0]
   [0,1,300] *  [sin45°,  cos45°,    0]
   [0,0, 1 ]    [   0,     0 ,       1]

相反的 矩陣相乘不滿足交換律， 當(dāng)translate(300px,300px)和rotate(45deg)兩個(gè)順序互換的話，矩陣相乘算得結(jié)果參數(shù)不同， 所以對(duì)應(yīng)的效果也會(huì)不同

問題2中

原本transform通過rotate和scale用2個(gè)矩陣相乘賦予了Matrix()函數(shù)參數(shù)
然而transform一旦再次設(shè)置rotate()，則會(huì)將Matrix()函數(shù)參數(shù)重置，
所以才會(huì)使得transform之前設(shè)置的屬性蕩然無存。

結(jié)語

原本CSS3的問題， 怎么就不知不覺變成線代問題了呢 - -

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112697.html

相關(guān)文章

  • transform與Matrix矩陣

    摘要：每個(gè)線性函數(shù)使用矩陣描述，如將矩陣乘法用于上述坐標(biāo)系中的每個(gè)點(diǎn)，一個(gè)變換就形成了可以在一行中進(jìn)行多次矩陣乘法進(jìn)行變換有了這種方法，就可以描述大部分常見的變換并因此可以將他們組合起來，如旋轉(zhuǎn)縮放或拉伸。事實(shí)上，所有線性函數(shù)的變換都可以被描述。 問題引入 1. .box1{ position: absolute; top: 0; left: 0; width...

    import. 評(píng)論0 收藏0

  • 聊聊 DisplayObject 的x/y/regX/regY/rotation/scale/ske

    摘要：首先要指出的是實(shí)例的屬性與的參數(shù)沒有關(guān)系。同理可得的與在效果上都是。對(duì)實(shí)例設(shè)置了后，實(shí)例的位置會(huì)發(fā)生變化，這是因?yàn)閳?zhí)行了。自此以下結(jié)論是正確的的最終也會(huì)轉(zhuǎn)換成原生的 首先要指出的是：DisplayObject 實(shí)例的屬性 與 graphics.draw*(x, y, ...) 的參數(shù)沒有關(guān)系。 在原生的 Canvas 中有 的概念，例如：ctx.rect(x, y, width, ...

    lanffy 評(píng)論0 收藏0

  • HTML5中手勢(shì)原理分析與數(shù)學(xué)知識(shí)的實(shí)踐

    摘要：中手勢(shì)原理分析與數(shù)學(xué)知識(shí)的實(shí)踐引言在這觸控屏的時(shí)代，人性化的手勢(shì)操作已經(jīng)深入了我們生活的每個(gè)部分。這篇博文主要是解析了移動(dòng)端常用手勢(shì)的原理，及從前端的角度學(xué)習(xí)過程中所使用的數(shù)學(xué)知識(shí)。 HTML5中手勢(shì)原理分析與數(shù)學(xué)知識(shí)的實(shí)踐 引言 在這觸控屏的時(shí)代，人性化的手勢(shì)操作已經(jīng)深入了我們生活的每個(gè)部分。現(xiàn)代應(yīng)用越來越重視與用戶的交互及體驗(yàn)，手勢(shì)是最直接且最為有效的交互方式，一個(gè)好的手勢(shì)交互，能...

    rollback 評(píng)論0 收藏0

  • 如何優(yōu)雅的使用css3的矩陣變換matrix(矩陣)

    摘要：旋轉(zhuǎn)是可以理解為旋轉(zhuǎn)規(guī)律的縮放規(guī)律的斜切這里的意思是旋轉(zhuǎn)可以用縮放和斜切一起用來得到兩者聯(lián)系在于這個(gè)角度。 在寫文章的開始首先致謝張?chǎng)涡翊笊竦囊黄恼拢骸独斫釩SS3 transform中的Matrix(矩陣)》，因?yàn)檫@篇文章給了我很大的啟發(fā)，雖然文章寫得足夠清晰明了但是對(duì)于我這個(gè)不懂矩陣的人還是很難使用上matrix 這個(gè)高大上的玩意兒！如果你不懂矩陣也沒關(guān)系！ 一、概念 matri...

    Ali_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<