位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS3 轉(zhuǎn)換屬性 1.transform-style屬性

提問人：劉團圓發(fā)布時間：2020-11-19

    規(guī)定元素如何在3D空間中顯示，語法如下:

    transform - style : flat | preserve - 3d ;

    transform-style屬性的值可以是以下兩種：

    ? flat：表示所有子元素在2D平面呈現(xiàn)。

    ? preserve-3d:表示所有子元素在3D空間中呈現(xiàn)。

    【例題】使用transform-style屬性

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>document</title>

<style>

#d1

{

position: relative;

height: 200px;

width: 200px;

margin: 100px;

padding:10px;

border: 1px solid black;

}

#d2

{

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 */

}

#d3

{

padding:40px;

position: absolute;

border: 1px solid black;

background-color: yellow;

transform: rotateY(-60deg);

-webkit-transform: rotateY(-60deg); /* Safari and Chrome */

}

</style>

</head>

<body>

<div id="d1">

<div id="d2">HELLO

<div id="d3">world</div>

</div>

</div>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(0)
返回頂部