這篇文章主要介紹“CSS3中設(shè)置3D變形的transform-style屬性介紹”，在日常操作中，相信很多人在CSS3中設(shè)置3D變形的transform-style屬性介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3中設(shè)置3D變形的transform-style屬性介紹”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計,潘集網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:潘集等地區(qū)。潘集做網(wǎng)站價格咨詢:028-86922220
transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現(xiàn)。他主要有兩個屬性值：flat和preserve-3d。
transform-style屬性的使用語法非常簡單：
CSS Code復(fù)制內(nèi)容到剪貼板
transform-style: flat | preserve-3d
其中flat值為默認值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。
也就是說，如果對一個元素設(shè)置了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進行呈現(xiàn)。沿著X軸或Y軸方向旋轉(zhuǎn)該元素將導(dǎo)致位于正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者后面。如果對一個元素設(shè)置了transform-style的值為preserve-3d，它表示不執(zhí)行平展操作，他的所有子元素位于3D空間中。
transform-style屬性需要設(shè)置在父元素中，并且高于任何嵌套的變形元素。最后，我們運用一個翻轉(zhuǎn)的例子，來加深一下對transform-style屬性的印象：
HTML模板
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS
CSS Code復(fù)制內(nèi)容到剪貼板
.wrap {
width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(images/bg-grid.jpg) no-repeat center center;
background-size: 100% 100%;
}
/*設(shè)置動畫*/
@keyframes spin{
0%{
transform:rotateY(0deg)
}
100%{
transform:rotateY(360deg)
}
}
.spin {
width: 142px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -72px;
margin-top: -101px;
border: 1px dashed orange;
cursor: pointer;
transform-style: preserve-3d;
}
/*調(diào)用動畫*/
.spin:hover{
animation:spin 5s linear infinite;
}
.rotate {
background: url(images/cardKingClub.png) no-repeat center;
background-size: 100% 100%;
border: 5px solid hsla(50,50%,50%,.9);
transform: perspective(200px) rotateY(45deg);
}
.rotate img{
border: 1px solid green;
transform: rotateX(15deg) translateZ(10px);
transform-origin: 0 0 40px;
}
/*改變transform-style的默認值*/
.three-d {
transform-style: preserve-3d;
}
特別聲明：為了節(jié)省篇幅，代碼中CSS3屬性代碼省去了各瀏覽器的私有前綴，在實際操作中，需要將各瀏覽器前綴加上，才會有效果。
其效果如下所示：
正如您所看到的，當(dāng)元素設(shè)置.rotate設(shè)置了flat值時，其子元素img不會根據(jù)translateZ()值攤開，而在同一平面旋轉(zhuǎn)，如上圖上部分所示；當(dāng)元素.rotate設(shè)置了preserve-3d值時，其子元素img會根據(jù)translateZ()值攤開，不再會堆疊在一起，如上圖下部分所示。
有一點需要特別提醒大家，如果你的元素設(shè)置了transform-style值為preserve-3d，就不能為了防止子元素溢出容器而設(shè)置overflow值為hidden，如果設(shè)置了overflow:hidden同樣可以迫死子元素出現(xiàn)在同一平面（和元素設(shè)置了transform-style為flat一樣的效果），如下圖所示：
到此，關(guān)于“CSS3中設(shè)置3D變形的transform-style屬性介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當(dāng)前標題：CSS3中設(shè)置3D變形的transform-style屬性介紹
新聞來源：http://weahome.cn/article/jspsoe.html
重慶分公司
重慶分公司
