CSS3 3D詳解 CSS3是一種為廣泛的Web設(shè)計(jì)者和開發(fā)者提供的新標(biāo)準(zhǔn)，其中最令人興奮的是其3D變換和動(dòng)畫功能。這些功能使得今天的網(wǎng)頁設(shè)計(jì)更加動(dòng)態(tài)和交互。在本文中，將詳細(xì)介紹CSS3的3D變換和一些示例。 3D變換 CSS3的3D變換是通過某些CSS屬性應(yīng)用于元素來實(shí)現(xiàn)的。這些屬性包括transform-style, perspective, transform-origin, transform，以下就分別進(jìn)行介紹。 transform-style transform-style屬性規(guī)定了子元素是平面顯示還是繼承父元素的3D變換，默認(rèn)值為flat。如果將這個(gè)屬性的值設(shè)置為preserve-3d，那么子元素將繼承父元素的3D變換。 .pre{ transform-style:preserve-3d; } perspective perspective屬性設(shè)置了元素的透視圖，也就是當(dāng)元素被放在3D空間中時(shí)該元素遠(yuǎn)離觀察者的距離。在一個(gè)元素和其子元素之間一旦經(jīng)過任何3D變換，該元素的部分（或者全部）看起來比其他子元素更靠近觀察者。一個(gè)大于0的值需要被應(yīng)用于這個(gè)屬性。要應(yīng)用于子元素也可以在這個(gè)屬性之后添加-children。 .pre{ perspective:400px; perspective-children; } transform-origin transform-origin屬性定義了3D變換的起點(diǎn)，也就是元素繞著哪一個(gè)軸進(jìn)行變換。這個(gè)屬性默認(rèn)值是50％50％0。其中第一和第二個(gè)值是元素的左上角坐標(biāo)的百分比，第三個(gè)值是僅僅影響3D變換Z軸的像素?cái)?shù)量。這個(gè)屬性的配合可以使得元素繞x軸、y軸和z軸進(jìn)行變換。 .pre{ transform-origin: 50% 50% 0; } transform transform屬性是應(yīng)用于元素的3D變換的最重要屬性。transform屬性有下列幾種變換： translate(x,y,z)：設(shè)置元素在三個(gè)坐標(biāo)軸上的移動(dòng) rotate(alpha,beta,gamma)：設(shè)置元素四個(gè)軸的旋轉(zhuǎn)量 scale(x,y,z)：設(shè)置元素的縮放 skew(x,y)：設(shè)置元素的傾斜角度 示例 下面的例子演示了如何應(yīng)用基本的3D變換。 .pre{ perspective: 400px; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); } 下面的例子演示了如何繞Y軸進(jìn)行3D變換并設(shè)置透視圖。 .pre{ transform-origin: 50% 50%; perspective: 800px; transform: rotateY(-30deg) translateX(-100%); } 以上是CSS3 3D變換的基礎(chǔ)知識(shí)，大家可以自己嘗試和實(shí)踐。3D變換可以讓網(wǎng)頁設(shè)計(jì)更加豐富多彩，同時(shí)也讓交互變得更加有趣。