這篇文章帶給大家的內容是關於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-origin
如果未指定初始值，將會直接使用繼承。
deg 度
grad 百分度（複習一下數學，一種角的測量單位，定義為將一個圓切成400等分，也就是一個直角等於100百分度https://zh.wikipedia.org/wiki/百分度）
rad 弧度 （複習一下數學https:// zh.wikipedia.org/wiki/弧度）
turn 圈數
使用 號或-號開頭，正數表示順時針的角，負數表示逆時針的角。
所有的如下表示
此縮放僅支援歐幾里德平面（二維平面）上的變換
##設定的css的值為
transform: scale(2, 2);
至此，完成了一個橫軸一倍，縱軸一倍的放大。
同理，縮小也可以。
傾斜 skew
css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵，然后对矩阵进行运算，得出运算后的坐标值。 
由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组（x，y，z）表示，称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子，则给定的一组齐次坐标点不变
3. 相反，当且仅当通过所有坐标乘以相同的非零常数，从另一个获得一个时，两组齐次坐标表示相同的点
4. 当z不为0时，表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点
围绕x轴进行旋转 
ps；设置的原点值为center
即
transform-origin:center;
rotateY()同理
3d组合不可进行交换，如果进行交换会导致出现不同的效果。
相关推荐：
以上是css如何實作2D的轉換（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
