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的基本資料型態。 angle表示角的大小，單位為度（degrees）百分度（gradians）弧度（radians）圈數（turns）

deg 度
grad 百分度（複習一下數學，一種角的測量單位，定義為將一個圓切成400等分，也就是一個直角等於100百分度https://zh.wikipedia.org/wiki/百分度）
rad 弧度 （複習一下數學https:// zh.wikipedia.org/wiki/弧度）
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组合不可进行交换，如果进行交换会导致出现不同的效果。

相关推荐：

css3如何实现自定义滚动条样式？（代码）

在页面中怎么用css让图片有立体感的效果?（代码实测）

以上是css如何實作2D的轉換（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！