這篇文章帶給大家的內容是關於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中文網其他相關文章!