# 第 24 章 CSS3 變形效果[下] 學習要點： 1.3D 變形簡介? 2.transform-style 3.perspective 4.3D 變形屬性 主講教師：李炎恢 本章主要探討 HTML5?中 CSS3?的變形效果，主要接著上節課的 2D?平面變形轉換到 3D?立體變形。 **一．****3D****?變形簡介** 之前我們學習了元素的平移、旋轉、縮放和傾斜等功能。這些效果只是單純在二維平面圖上的，我們稱之為 2D。那么其實 CSS3?也提供了三維立體的一些功能效果，并且目前較新的主流瀏覽器都比較支持，只不過比 2D?晚一些，對瀏覽器的版本要求也要高一些。 由于 3D?是立體三維，在 x、y?軸的基礎上一般會多出一個 z?軸，深入躍出軸。以下是 3D 變形的屬性值表，如下： | **屬性值** | **說明** | | --- | --- | | translate3d(x,y,z) | 3D 方式平移元素，設置?x、y 和?z 軸 | | translateZ(z) | 設置 3D?方式平移元素的 z?軸 | | scale3d(x,y,z) | 3D 方式縮放一個元素 | | scaleZ(z) | 設置 3D?方式縮放元素的 z?軸 | | rotate3d(x,y,z,a) | 3d 方式旋轉元素 | | rotateX(a) | 分別設置 3D?方式的旋轉元素的 x、y?和 z?軸 | | rotateY(a) | | rotateZ(a) | | perspective(長度值) | 設置一個透視投影矩陣 | | matrix3d(多個值) | 定義一個矩陣 | ?3D 變形比?2D 變形出來的要晚一些，所以如果需要兼容舊版本瀏覽器，可以對照這個表。具體如下： | | **Opera** | **Firefox** | **Chrome** | **Safari** | **IE** | | --- | --- | | 支持需帶前綴 | 15 ~ 22 | 10 ~ 15 | 12 ~ 35 | 4 ~ 8 | 無 | | 支持不帶前綴 | 23+ | 16+ | 26+ | 無 | 10.0+ | //兼容版本完整形式? ``` -webkit-transform: translateZ(200px); -moz-transform: translateZ(200px); -o-transform: translateZ(200px); -ms-transform: translateZ(200px); transform: translateZ(200px); ``` **二．****transform-style** transform-style 屬性是指定嵌套元素如何在?3D 空間中呈現。 | 屬性值 | 說明 | | --- | --- | | flat | 默認值，表示所有子元素在 2D?平面呈現。 | | preserve-3d | 表示子元素在 3D?空間中呈現。 | ?//一般設置到當前元素的父元素 ``` transform-style: preserve-3d; ``` 需要再配合后面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各種廠商前綴。 **三．****perspective** perspective 是?3D 變形的重要屬性，該屬性會設置查看者的位置，并將可視內容映射到一個視錐上，繼而投放到一個 2D?平面上。 | 屬性值 | 說明 | | --- | --- | | none? | 默認值，表示無限的角度來看 3D?物體，但看上去是平的。 | | 長度值 | 接受一個長度單位大于 0?的值，其單位不能為百分比。值越大，角度出現的越遠，就好比你人離遠一點看物體。值越小，正相反。 | //設置查看者的距離位置，一般設置在元素的父元素上 ``` perspective: 1000px; ``` 需要再配合后面的功能屬性和變形配置，才能看到效果。同樣，這個屬性也需要加上各種廠商前綴。 **四．****3D****?變形屬性** 我們運用前面 3D?功能屬性 transform-style?和 perspective?來構建 3D?變形效果。 **1.translate3d(x,y,z)** //需要?3D 位移的?HTML 結構，必須有父元素包含 ``` <div id="a"> <img src="img.png" alt="" /> </div> ``` //CSS 部分，父元素設置?3D 呈現且設置透視距離 ``` #a { perspective: 1000px; transform-style: preserve-3d; } img { /*z 軸可以是負值*/ transform: translate3d(300px,100px,240px); } ``` **2.translateZ(z)** //可以單獨設置?z 軸，z 軸可以是負值 ``` img { transform: translateZ(240px); } ``` **3.scale3d(x,y,z)** //3D 縮放，單獨設置無效，需要配合角度 ``` img { transform: scale3d(1,1,1.5) rotateX(45deg); } ``` **4.scaleZ(z)** //單獨設置?z 軸，x 和?y 軸默認為?1 ``` img { transform: scaleZ(1.5) rotateX(45deg); } ``` **5.rotate3d(x,y,z,a)** //設置?3D 旋轉，a 表示角度，xyz 是?0 或?1 之間的數值 ``` transform: rotate3d(1,0,0,45deg); ``` **6.rotateX(a)****、****rotateY(a)****、****rotateZ(a)** //單獨設置?3D 旋轉 ``` transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg); transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); ``` 最后一個 matrix3d?就不多說了，忽略。 CSS3 還提供了?perspective-origin 屬性來設置?3D 變形中的源點角度。該屬性默認值為 50% 50%也就是 center center。 | **屬性值** | **說明** | | --- | --- | | 百分數值 | 指定元素 x?軸或 y?軸的起點 | | 長度值 | 指定距離 | | left | 指定 x?軸的位置 | | center | | right | | top | 指定 y?軸的位置 | | center | | bottom | ?//源點設置為右上方變形 ``` perspective-origin: top right; ``` CSS3 還提供了一個在元素中設置透視的值?perspective(長度值)，但它還是和在父元素設置有一定不同。因為父元素整個作為透視，而元素自己作為透視，導致不同。 //具體測試看透視的距離 ``` img { transform: perspective(1000px) rotateY(45deg); } ```