css3 2d轉換3d轉換以及動畫的知識點彙總

2021-07-26 14:08:03 字數 2884 閱讀 2087

2d轉換的方法:

1、移動 translate(x, y) 可以改變元素的位置,x、y可為負值;

2、縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放,x、y的取值可為小數,不可為負值;

4、旋轉 rotate(deg) 可以對元素進行旋轉,正值為順時針,負值為逆時針;

5、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜

2d轉換的屬性:

用法:例如:

div

較難理解部分的分析

2d轉換的移動規則和相對定位類似,即無論元素移動到**,她的原始位置一直被他佔據著。

skew 傾斜

用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

引數表示傾斜角度,單位deg

首先需要說明的是skew的預設原點transform-origin是這個物件的中心點

看圖:

transform-origin 基準點

在使用transform方法進行文字或影象的變形時,是以元素的中心點為基準點進行的。使用transform-origin屬性,可以改變變形的基準點。

用法:transform-origin: 10px 10px;

共兩個引數,表示相對左上角原點的距離,單位px,第乙個引數表示相對左上角原點水平方向的距離,第二個引數表示相對左上角原點垂直方向的距離;

兩個引數除了可以設定為具體的畫素值,其中第乙個引數可以指定為left、center、right,第二個引數可以指定為top、center、bottom。

想深入理解3d轉換的原理  可以參考 張鑫旭css3 3d轉換

首先腦子裡要有3d座標圖

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n) 定義 3d 轉換,使用 16 個值的 4x4 矩陣。

translate3d(x,y,z) 定義 3d 轉化。

translatex(x) 定義 3d 轉化,僅使用用於 x 軸的值。

translatey(y) 定義 3d 轉化,僅使用用於 y 軸的值。

translatez(z) 定義 3d 轉化,僅使用用於 z 軸的值。

scale3d(x,y,z) 定義 3d 縮放轉換。

scalex(x) 定義 3d 縮放轉換,通過給定乙個 x 軸的值。

scaley(y) 定義 3d 縮放轉換,通過給定乙個 y 軸的值。

scalez(z) 定義 3d 縮放轉換,通過給定乙個 z 軸的值。

rotate3d(x,y,z,angle) 定義 3d 旋轉。

rotatex(angle) 定義沿 x 軸的 3d 旋轉。

rotatey(angle) 定義沿 y 軸的 3d 旋轉。

rotatez(angle) 定義沿 z 軸的 3d 旋轉。

perspective(n) 定義 3d 轉換元素的透視檢視。

如果說rotatex/rotatey/rotatez可以幫助理解三維座標,則translatez則可以幫你理解透視位置。

我們都知道近大遠小的道理,對於沒有rotatex以及rotatey的元素,translatez的功能就是讓元素在自己的眼前或近或遠。比方說,我們設定元素perspective為201畫素,如下:

perspective: 201px;
則其子元素,設定的translatez值越小,則子元素大小越小(因為元素遠去,我們眼睛看到的就會變小);translatez值越大,該元素也會越來越大,當translatez值非常接近201畫素,但是不超過201畫素的時候(如200畫素),該元素的大小就會撐滿整個螢幕(如果父輩元素沒有類似overflow:hidden的限制的話)。因為這個時候,子元素正好移到了你的眼睛前面,所謂「一葉蔽目,不見泰山」,就是這麼回事。當translatez值再變大,超過201畫素的時候,該元素看不見了——這很好理解:我們是看不見眼睛後面的東西的!

參考部落格 張鑫旭css3 3d轉換

perspective-origin這個屬性超級好理解,表示你那雙色迷迷的眼睛看的位置。預設就是所看舞台或元素的中心。有時候,我們對中心的位置是不感興趣的,希望視線放在其他一些地方。比方說

下面為立方體的實際應用透視效果圖:

在顯示世界中,我們無法穿過軟妹a看到其身後的軟妹b或c或d;但是,在css3的3d世界中,預設情況下,我們是可以看到背後的元素

因此,為了切合實際,我們常常會這樣設定,使後面元素不可見:

backface-visibility:hidden;
例子 菜鳥教程

最後看乙個3d轉換的例子:的旋轉木馬效果demo

張鑫旭  好吧,css3 3d transform變換,不過如此!

css3 2d轉換3d轉換以及動畫的知識點彙總

2d轉換的方法 1 移動 translate x,y 可以改變元素的位置,x y可為負值 2 縮放 scale x,y 可以對元素進行水平和垂直方向的縮放,x y的取值可為小數,不可為負值 4 旋轉 rotate deg 可以對元素進行旋轉,正值為順時針,負值為逆時針 5 傾斜 skew deg,d...

css3 2d轉換3d轉換以及動畫的知識點彙總

2d轉換的方法 1 移動 translate x,y 可以改變元素的位置,x y可為負值 2 縮放 scale x,y 可以對元素進行水平和垂直方向的縮放,x y的取值可為小數,不可為負值 4 旋轉 rotate deg 可以對元素進行旋轉,正值為順時針,負值為逆時針 5 傾斜 skew deg,d...

css3 2d轉換3d轉換以及動畫的知識點彙總

2d轉換的方法 1 移動 translate x,y 可以改變元素的位置,x y可為負值 2 縮放 scale x,y 可以對元素進行水平和垂直方向的縮放,x y的取值可為小數,不可為負值 4 旋轉 rotate deg 可以對元素進行旋轉,正值為順時針,負值為逆時針 5 傾斜 skew deg,d...