溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css transform-style屬性

發(fā)布時(shí)間：2020-05-14 16:53:44 來(lái)源：億速云 閱讀：236 作者：Leah 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是css transform-style的屬性，相信大部分人都還不知道css transform-style屬性是什么，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話不多說(shuō)，一起往下看吧。

css transform-style屬性規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素，其語(yǔ)法是transform-style: flat|preserve-3d；該屬性必須與transform屬性一同使用。

css transform-style屬性怎么用？

作用：transform-style 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素。

語(yǔ)法：

transform-style: flat|preserve-3d

說(shuō)明：

flat    子元素將不保留其 3D 位置。

preserve-3d    子元素將保留其 3D 位置。

注釋?zhuān)?/strong>

該屬性必須與 transform 屬性一同使用。

css transform-style屬性使用示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO
  <div id="div3">YELLOW</div>
  </div>
</div>
</body>
</html>

效果輸出：

css transform-style屬性

以上就是css transform-style屬性的知識(shí)匯總，內(nèi)容較為全面，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ骺赡軙?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手