css如何?2D的轉換（執行個體）

本篇文章給大家帶來的內容是關於css如何?2D的轉換（執行個體），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

指令碼化css
下面通過css實現動畫效果，可以使用指令碼化的css實現滑入，輪廓伸縮的列表，即動態HTML，一個過時的說法DHTML

一些css的基礎知識

之前已經看過厚厚的一本大書，現在簡單看一下，補充一下不知道的點

層疊

web瀏覽器混合元素的style屬性，然後再計算樣式。

顏色透明度和半透明

顏色有半透明的顏色（不知道為什麼edge不相容）

指令碼化內聯樣式

p.style.background = "#FFFFFF"

即通過js完成css樣式的添加

由於-會被js認為有語法錯誤，所以-統一在js中變成駝峰命名法進行命名。這是一種習慣

同樣的也可以直接使用屬性進行設定

e.setAttribute

進行設定css的內聯樣式

其實是通過增加css的屬性的內聯樣式達到效果的。即style的值

style的權重要大於任何的樣式，所以用js產生的style的樣式的值，一直起作用，除非刻意的更改其權重。

css的2d轉換

即，進行一些css的轉換

座標

描述座標的系統有笛卡爾座標系統和齊次座標系。

笛卡爾座標系

用一組數值在一組平面上表示一個點。其座標為右手法則（在三維上）
更多 https://en.wikipedia.org/wiki/Cartesian_coordinate_system
其下方的變換是基於笛卡爾座標系進行變換
通過將點用矩陣進行表示，對矩陣進行變換，（線性變換）得到相應的結果。例如進行乘法變換，加法變換等等。

transform

屬性將會允許修改CSS視覺格式模型的座標空間。使用它，元素可以被轉換（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。 只對區塊層級元素生效

原點

有三個值，一個值為x軸，一個值為y軸，一個值為z軸。
如所示

每個值可以進行設定，此為旋轉原點
具體的值為transform-origin
如果未指定初始值，將會直接使用繼承。

示範

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

rotate旋轉

該方法定義了一種將元素圍繞一個定點，該定點由transform-origin指定元素變形的原點。

單位 angle

一種css的基礎資料型別 (Elementary Data Type)。angle表示角的大小，單位為度（degrees）百分度（gradians）弧度（radians）圈數（turns）
deg 度
grad 百分度 （複習一下數學，一種角的測量單位，定義為將一個圓切成400等分，也就是一個直角等於100百分度 https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA%A6）
rad 弧度 （複習一下數學 https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6）
turn 圈數

文法

數字與單位之間沒有空格。數字為0時，單位可以省略。
使用+號或者-號開頭，正數表示順時針的角，負數表示逆時針的角。

一些例子

90deg = 100grad = 0.25trun ≈ 1.57rad(約等於π/2)
所有的如下表示

一個旋轉說明

縮放 scale

一個css函數scale()用於縮放。用於修改元素的大小，通過向量形式定義的縮放值來放大和縮小元素。有兩個值，一個值為sx，一個值為sy，根據兩個值得出結果。如果sy未設定，將會直接用sx的值設定sy的值。其單位為css資料類型中的number

該縮放僅僅支援歐幾裡得平面（二維平面）上的變換

設定的css的值為

transform: scale(2, 2);

至此，完成了一個橫軸一倍，縱軸一倍的放大。
同理，縮小也可以。

傾斜 skew

為一個偏斜的二維平面上的原件變化，其結果為資料類型。

剪下映射

css的傾斜為剪下映射,每個點的座標由與指定角度或成比例的值到原點的距離。對於每個座標產生矩陣，然後對矩陣進行運算，得出運算後的座標值。

css的3d轉換

座標

齊次座標系

由笛卡爾座標系投影得到。
1. 檢視平面中的任何點由三元組（x，y，z）表示，稱為點的齊次座標和投影座標
2. 如果座標乘以公因子，則給定的一組齊次座標點不變
3. 相反，若且唯若通過所有座標乘以相同的非零常數，從另一個獲得一個時，兩組齊次座標表示相同的點
4. 當z不為0時，表示的點為歐幾裡得的點。
5. 當z為0時表示的點為無窮遠處的點

rotateX()

圍繞x軸進行旋轉

ps；設定的原點值為center
即

transform-origin:center;

rotateY()同理

3d組合不可進行交換，如果進行交換會導致出現不同的效果。