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

資訊專欄INFORMATION COLUMN

transform與Matrix矩陣

import. / 2924人閱讀

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

問題引入 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設置的translate和rotate，2個盒子由于先后順序不同，但是差別卻很大。

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)； 使得一開始設置的scale恢復了初始值1。
由此可見，transform 是組件化的，其中的2D圖像變化并不只是單純的skew(),scale(),rotate()，translate()等

Matrix matrix()

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

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

代表將坐標系先 translate 然后 rotate 然后 skew 然后 scale 為新的坐標系。即新坐標系下的點先經過 scale 然后 skew 然后 rotate 然后 translate 后對應于老坐標系下的點。

那Matix是如何運算的呢？ 
引用文字

在笛卡爾坐標系中，每個 歐氏空間 里的點都由橫坐標和縱坐標這兩個值來確定。 在CSS（和大部分的計算機圖形學）中，原點 (0, 0) 在元素的左上角。每個點都使用數學上的向量符號(x,y)來描述。

每個線性函數使用 2 × 2 矩陣描述，如:

     [a c]
     [b d]

將矩陣乘法用于上述坐標系中的每個點，一個變換就形成了：

可以在一行中進行多次矩陣乘法進行變換：

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

而上面的例子可以寫成

顯而易見的
tranmsform的屬性是由Matrix矩陣通過參數計算出來

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

這兩個是等價的 ， 意味著translate的兩個參數 ，被transform放到了第五個和第六個參數中計算。

同樣的

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

這兩個也是等價的

如果是旋轉rotate(),則要用到三角函數

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

skew()則是使用tan()

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

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

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

相反的 矩陣相乘不滿足交換律， 當translate(300px,300px)和rotate(45deg)兩個順序互換的話，矩陣相乘算得結果參數不同， 所以對應的效果也會不同

問題2中

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

結語

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51484.html

相關文章

  • transform與Matrix矩陣

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

    sean 評論0 收藏0

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

    摘要：首先要指出的是實例的屬性與的參數沒有關系。同理可得的與在效果上都是。對實例設置了后，實例的位置會發生變化，這是因為執行了。自此以下結論是正確的的最終也會轉換成原生的 首先要指出的是：DisplayObject 實例的屬性 與 graphics.draw*(x, y, ...) 的參數沒有關系。 在原生的 Canvas 中有 的概念，例如：ctx.rect(x, y, width, ...

    lanffy 評論0 收藏0

  • HTML5中手勢原理分析與數學知識的實踐

    摘要：中手勢原理分析與數學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經深入了我們生活的每個部分。這篇博文主要是解析了移動端常用手勢的原理，及從前端的角度學習過程中所使用的數學知識。 HTML5中手勢原理分析與數學知識的實踐 引言 在這觸控屏的時代，人性化的手勢操作已經深入了我們生活的每個部分?，F代應用越來越重視與用戶的交互及體驗，手勢是最直接且最為有效的交互方式，一個好的手勢交互，能...

    rollback 評論0 收藏0

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

    摘要：旋轉是可以理解為旋轉規律的縮放規律的斜切這里的意思是旋轉可以用縮放和斜切一起用來得到兩者聯系在于這個角度。 在寫文章的開始首先致謝張鑫旭大神的一篇文章：《理解CSS3 transform中的Matrix(矩陣)》，因為這篇文章給了我很大的啟發，雖然文章寫得足夠清晰明了但是對于我這個不懂矩陣的人還是很難使用上matrix 這個高大上的玩意兒！如果你不懂矩陣也沒關系！ 一、概念 matri...

    Ali_ 評論0 收藏0

發表評論

0條評論

import.

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<