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

2021-08-22 13:10:58 字數 543 閱讀 3781

雖然我們我們在前端工作中,對於2d、3d和動畫效果一般來說都用不上,基本上都是用js或jq來完成這些動畫效果,但是最基礎的這些你是否已經忘記了呢?

昨天重溫了一下這些東西,順手寫了兩個小例子

首先 在html中定義乙個div,

只需要乙個div即可,我使用偽元素來畫出;

通過以上**我們就得到了乙個紅紅火火的心

和上面畫心形 一樣 我依然使用的是偽元素來寫的

先定義乙個div,取名為 taiji

然後再用偽元素 且看我是如何把它給造出來,話不多說,直接上**

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

這裡記錄我對html的學習過程,每天練習了新的知識在這裡記錄。實現2d效果用到了transform,有一下幾個功能。因為這些效果是突然變化的所以使用過渡會看著舒服一些,用到了transition 下面舉例說明以上效果的用法。transform rotate 45deg transform origi...

css3中2D 3D屬性詳解

首先要清楚一點,在css中的x軸正方向從左至右,但是y軸的正方向是從上至下。位移 改變元素的位置 transform translate x,y 定義2d轉換,沿著x軸和y軸移動,實際上本質和定位當中的left right top bottom一樣。例如 box 逆時針按中心點旋轉45度 1.設定的...

css動畫2D 3D的轉換

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