HTML CSS實現2D 3D效果知識筆記

2021-09-28 11:23:36 字數 929 閱讀 5381

這裡記錄我對html的學習過程,每天練習了新的知識在這裡記錄。

實現2d效果用到了transform,有一下幾個功能。

因為這些效果是突然變化的所以使用過渡會看著舒服一些,用到了transition

下面舉例說明以上效果的用法。

transform:rotate(-45deg);	

transform-origin:top left;

transform:skew(45deg,30deg)

transform:scale(-2,1)

transform:translate(-100px,100px)

transition:all 1s 3s linear

3d和2d類似,也使用到了rotate(旋轉)和translate(位移),不過3d使用的是rotate3d()translate3d(),這兩個比較常用,scale3d()不常用。

3d效果直接寫在頁面上是看不到的,需要加乙個屬性:perspective,設定從**看介面上的元素。

perspective:1080px;			

perspective-origin:0 0;

transform:rotate3d(1,0,0,45deg);

transform:rotatex(-45deg);

transform:translate(100px,0,0);

tansform:translatex(-100px)

transfrom:scale3d(1,1,1)

3d相比於2d缺少了乙個拉伸skew的功能。

今天先到這裡~~

HTML CSS3 中的2D 3D和動畫效果

雖然我們我們在前端工作中,對於2d 3d和動畫效果一般來說都用不上,基本上都是用js或jq來完成這些動畫效果,但是最基礎的這些你是否已經忘記了呢?昨天重溫了一下這些東西,順手寫了兩個小例子 首先 在html中定義乙個div,只需要乙個div即可,我使用偽元素來畫出 通過以上 我們就得到了乙個紅紅火火...

css動畫2D 3D的轉換

可以使用2d,3d來轉換元素 translate 使元素移動 有兩個引數,x和y,x表示水平方向的移動,y表示垂直方向的移動 例如 transfrom translate 100px,100px 例子 transfrom rotate 180deg deg 是乙個度數單位必須寫的 例子 transf...

Unity Shader學習 2D3D物體描邊

參考了下法線擠出的方法感覺對於法線夾角過大的物體來說效果不好,先簡單實現一下,大部分情況應該能用。ui描邊效果找不到特別好的,仿照了unity自帶的outline組建,其實方法挺差的而且估計挺費效能,基本效果還是能將就著用用。描邊基本原理 3d物體沿發現拉公升擴大影象,渲染成純色的,然後把原影象疊上...