首頁  >  文章  >  web前端  >  css如何實作2D的轉換(實例)

css如何實作2D的轉換(實例)

不言
不言原創
2018-08-09 16:57:462017瀏覽

這篇文章帶給大家的內容是關於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軸。

如下圖所示

css如何實作2D的轉換(實例)每個值可以進行設置,此為旋轉原點
具體的值為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)

所有的如下表示

css如何實作2D的轉換(實例)

一個旋轉說明

css如何實作2D的轉換(實例)

縮放scale

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

此縮放僅支援歐幾里德平面(二維平面)上的變換

css如何實作2D的轉換(實例)##設定的css的值為

transform: scale(2, 2);

至此,完成了一個橫軸一倍,縱軸一倍的放大。

同理,縮小也可以。


傾斜 skew

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

剪切映射

css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵,然后对矩阵进行运算,得出运算后的坐标值。
css如何實作2D的轉換(實例)
css如何實作2D的轉換(實例)

css的3d转换

坐标

齐次坐标系

由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组(x,y,z)表示,称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子,则给定的一组齐次坐标点不变
3. 相反,当且仅当通过所有坐标乘以相同的非零常数,从另一个获得一个时,两组齐次坐标表示相同的点
4. 当z不为0时,表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点

rotateX()

围绕x轴进行旋转
css如何實作2D的轉換(實例)
ps;设置的原点值为center

transform-origin:center;

rotateY()同理

3d组合不可进行交换,如果进行交换会导致出现不同的效果。

相关推荐:

css3如何实现自定义滚动条样式?(代码)

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


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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn