CSS / JS 的圖形矩陣處理

眾所周知，CSS 的 transform 或是 SVG 的 transform 可以使用 translateX、rotateX、scale……等 transform functions。而裡面最為複雜的就是 matrix

參閱 MDN 的說明， matrix 有 6 個參數：matrix(a, b, c, d, tx, ty) ，以投影座標（因為我常用的 GIMP 、我當初學的都是使用投影坐標（projective coordinates），我這篇也都使用投影座標來講）來表示的話，就是：

$\left(\begin{array}{ccc}\mathrm{a}& \mathrm{c}& \mathrm{tx}\\ \mathrm{b}& \mathrm{d}& \mathrm{ty}\\ 0& 0& 1\end{array}\right)$

如果今天我 CSS 是 translateX(100px)，那相當於matrix(1, 0, 0, 1, 100, 0)，即： $\left(\begin{array}{ccc}1& 0& 1\\ 0& 100& 0\\ 0& 0& 1\end{array}\right)$

在 iPhone 遇到的 CSS 問題

這是最近遇到的狀況。

我在編寫網頁時，網頁有個圖示在電腦版跟手機板要以不同顏色顯示。

紀錄：CSS優先級

最近看到以下2篇文章，可以很好的了解 CSS 優先級的處理

• web.dev > 瞭解詳情 > CSS > 優先權
• ExplainThis：請說明 CSS 選擇器的優先級

學術報告格式以CSS的方顯示

算是因為最近用MarkDown寫文件，要轉成HTML時候搜尋到CSS counter-reset Property（W3Schools），於是就想統整一下某些學術報告的常用格式如何以CSS方式展現

用純CSS3建立menu

因為無聊去看bootstrap，突然好奇他們是怎麼寫menu list的，因為我以前也嘗試過自己寫，但問題是子選單的位置總是調不好。
結果看了以後，發現menu寫法還真簡單……