1.2D

2D坐標軸

? ? ? ? ? ? ? ? ? ? （負）（負）—|———————————————?X軸（正）|||||? Y軸（正） ? X軸：水平，向右為正，向左為負 Y軸：垂直，向下為正，向上為負

2D縮放

transform: scale() 縮放 ? - transform: scale(x,y) 沿著x軸和y軸縮放 - transform: scaleX(x) 沿著x軸縮放 - transform: scaleY(y) 沿著y軸縮放 ? > 取值范圍0~1之間表示縮小，1表示正常大小，1以上表示放大，默認值為1 > 取值為負值表示先翻轉后縮放 > > 為一個值的時候，沿著水平方向和垂直方向等比例縮放

2D旋轉

### ? * transform: rotate(ndeg) 旋轉* 語法* transform：rotate(deg);沿著中心點旋轉，默認值* transform: rotateX(deg);沿著X軸旋轉* transform: rotateY(deg);沿著Y軸旋轉ju單位：deg當角度值為正數時，元素沿著順時針方向旋轉當角度值為負數時，元素沿著逆時針方向旋轉 ? ? ? ?

設置元素基點位置

位移不能使用 ? * transform-origin: 水平方向 垂直方向; ? * 設置元素的基點位置，設置圍繞哪個點進行變化 ? * 取值 ?px ?關鍵字 ?水平：left center right垂直：top center bottom ? - 說明：兩個空格隔開的值，分別表示x,y軸的原點一個值時，另一個值默認center - 可為負數 ? > 必須與transform屬性配合使用 > > 位移不能用

旋轉，位移，縮放，的復合寫法

屬性之間用空格隔開，先位移再旋轉 ?.wrap:hover .box1 {transform: rotate(135deg);transform: translate(50px);transform: scale(1.5);/* 復合 先位移再旋轉*/transform: translate(100px) rotate(120deg) scale(1.5);}

2.3D效果

/* 創建3d網頁 */.wrap {/* 800px -1000px */perspective: 800px;} - perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網頁產生3D效果，單位像素 ?一般取值：800px-1000pxperspective：800px 就是人離屏幕800px 的地方觀看這個div元素。近大遠小 一般設置給父元素或者body

3.高寬自適應

網頁布局中經常要定義元素的寬高。但很多時候我們希望元素的大小能夠根據窗口或子元素自動調整，這就是自適應。 ? 寬度自適應 元素寬度的默認值為{wieth：auto}或者不設置 高度自適應 元素高度的默認值為{height：auto}或者不設置 ? ?

4.3d坐標軸

x軸：水平 向右為正，向左為負 y軸：垂直 向下為正，向上為負 z軸：垂直于屏幕，向外為正，向內為負

3D位移

transform: translateZ(900px);transform: translateZ(300px);transform: translateZ(-300px); ?/* 位移的3d函數 值之間用逗號隔開 */transform: translate3d(100px, 200px, 300px);/* transform: translateX(100px) translateY(200px) translateZ(300px); */

父子外間距塌陷

當子元素設置 margin-top的時候，子元素與父元素沒有產生上外間距，此時上外間距會疊加給父元素 ?當子元素和父元素同時具有上外間距，子元素與父元素沒有產生上外間距,外間距會疊加給父元素,子元素的上外間距和父元素的上外間距值，取最大值解決方法：1.給父元素設置overflow: hidden;2.給父元素設置1px的上邊框或者1px的上內填充3.規避margin，巧用padding

兄弟關系塌陷解決方法

?現象：兄弟關系元素，當遇到垂直外間距的時候，外間距會疊加取值情況：值一樣 取一個值值不樣 取最大值 ?解決方法：給兩個元素套一個父元素，設置溢出隱藏 ? ?

3D旋轉

- transform: rotateZ(a); 沿著Z軸方向旋轉 ? - a 指的是一個旋轉角度值，如果為正值，元素圍繞 Z 軸順時針旋轉；反之，如果為負值，元素圍繞 Z 軸逆時針 ?旋轉。 ? - transform: rotate3d(x,y,z,angle); ? - 參數： ?x：是一個 0 到１之間的數值，主要用來描述元素圍繞 X 軸旋轉的矢量值。 ?y：是一個 0 到１之間的數值，主要用來描述元素圍繞 Y 軸旋轉的矢量值。 ?z：是一個 0 到１之間的數值，主要用來描述元素圍繞 Z 軸旋轉的矢量值。 ?angle：一個角度值，指定在 3D 空間旋轉角度，正值順時針旋轉，反之元素逆時 ? ? ? 1、兩個值為零，定義X,Y,Z軸旋轉 rotate3d(1,0,0,angle) ? x軸旋轉 rotate3d(0,1,0,angle) ? y軸旋轉 rotate3d(0,0,1,angle) ? z軸旋 ? /* 沿著x軸方向旋轉 */ transform: rotateX(-45deg); transform: rotate3d(1,0,0,-45deg); ? /* 沿著y軸方向旋轉 */ transform: rotateY(-45deg); transform: rotate3d(0,1,0,-45deg); ? /* 沿著z軸方向旋轉 */ transform: rotateZ(-45deg); transform: rotate3d(0,0,1,-45deg); ? ? 2、兩個值不為零，定義多軸旋轉 rotate3d(1,0.5,0,30deg) ? x 1*30 ? 30deg ? y 0.5*30 15deg ? z 0*0 ? ? 0deg ? .box5:hover img {/* z */transform: rotate3d(.5, 1, 0, 60deg);/* x:0.5*60=30degy:1*60=60degz:0*60=0deg ?*/ } 3、三個值不為零，定義多軸旋轉 ? .box6:hover img {/* z */transform: rotate3d(.5, 1, 1, 60deg);/* x:0.5*60=30degy:1*60=60degz:1*60=60deg ?*/ }

3D必備屬性

- transform-style: preserve-3d; 創建3d空間 ? - 什么時候搭建3d舞臺？ ?- 父元素有3D變形，子元素也有3D變形 ? - perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網頁產生3D效果，單位像素 ? ? 一般取值：800px-1000px perspective：800px 就是人離屏幕800px 的地方觀看這個div元素。 當translateZ的大小臨近與800px時圖片離我們越來越近了 當它大于800px時，這個圖片就消失了 ? 反之當translateZ為負值時，我們可以看到圖片變小了，也就是圖片離人越來越遠了。 ? ? preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相當于2D效果 .transform-style屬性和perspective屬性放在父元素中,有時候perspective屬性放在body中 ?

總結

以上是生活随笔為你收集整理的css2D、3D详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。