4 CSS新特性之3D轉換

2022-08-18 04:24:08 字數 3071 閱讀 4995

3d轉換中最常用的是3d位移和3d旋轉。主要知識點如下：

div
修改成以下形式就沒有問題

transform: translatex(100px) translatey(100px);
或者

transform: translate3d(100px,100px,0);
同時translatez(100px)需要借助於透視才可以看到效果，以下寫法是看不到效果的

若透視perspective也就是d固定不變，z朝著正方向變大，則看到的物體越來越大

若透視perspective也就是d固定不變，z朝著負方向變大，則看到的物體越來越小

z等於0的時候才是物體的實際大小.

雖然說調整perspective和translatez都可以實現近大遠小的效果，但是perspective表示的是乙個觀察距離d.對於以下情況:
一般是為body設定乙個perspective,裡面每個div通過不同的tanslatez來實現不同的近大遠小

3d旋轉可以讓元素在3維平面內沿著x軸，y軸，z軸或者自定義軸進行旋轉

body 


img 


img:hover
對於元素x旋轉方向的判斷，這裡介紹乙個左手準則

body 


img 


img:hover
對於元素y旋轉方向的判斷，這裡介紹乙個左手準則

body 


img 


img:hover
對於元素z旋轉方向的判斷，這裡介紹乙個左手準則

transform:rotate3d(x,y,z,deg)沿著自定義軸旋轉deg度，xyz表示旋轉軸的向量，是標是是否希望沿著該軸旋轉。

body 


img 


img:hover
製作效果圖

效果圖分析：

（1）乙個父盒子裡面有兩個重疊的子盒子

（2）將第二個子盒子沿著x軸旋轉60度

（3）再將父盒子沿著y軸旋轉60度就可以實現這個效果

錯誤**

body 


.box 


.box:hover 


.box div 


.box div:last-child
分析：在為父盒子新增

.box:hover
之後，第二個盒子.box div:last-child的

transform: rotatex(60deg);
就會失效。原因：在為父級元素開啟3d空間的時候，其子元素預設不開啟3d立體空間，這時就引入了transform-style

說明：

.box
正面

反面

滑鼠經過的時候，盒子沿著y軸翻轉

黑馬程式設計師


pink老師


滑鼠經過驗證x軸向上翻轉


* 


ul ul li 


.box 


.box:hover 


.front,


.bottom 


.front 


.bottom 


3.之後得到的效果圖如下：


4.之後得到的效果圖如下：


5.之後得到的效果圖如下：


第五步的錯誤做法是往z軸負方向移動紫色盒子，會導致最後box盒子繞x軸的旋轉的中心線不經過紫色盒子和粉色盒子圍成的立方體的中心，如下所示




補充：以下內容是對先移動再旋轉和先旋轉再移動導致的不同效果的進一步體會


先移動再旋轉


1.原圖


2.沿z軸正方向移動150px


3.再沿著y軸正方向旋轉45度


先旋轉再移動


1.原圖


2.先沿著y軸正方向旋轉45度


3.再沿著z軸正方向移動150px
				
CSS3新特性  3D轉換技術
3d的特點 三維座標系 3d轉換知識要點 3d移動translate3d 語法transform translate3d x,y,z 演示 transform translate3d 100px,100px,100px 注意 x,y,z 對應的值不能省略，不需要填寫用 0 進行填充 transfor...

				
CSS3 CSS3新特性  2D轉換
什麼是轉換 transform 轉換可以理解為變形，可以實現元素的移動 translate 旋轉 rotate 縮放 scale 等效果 移動 translate transform translate x,y 總寫 transform translatex n transform translat...

				
css3新特性  過渡 動畫 2d 3d轉換
過渡 過渡三要素 1.必須要有屬性發生變化 如 width background等 2.必須要告訴系統哪個屬性需要執行過渡效果 transition property width,background 3.必須告訴系統過渡效果的持續時長 transition duration 5s,5s trans...