CSS3 轉(zhuǎn)換屬性 2.perspective屬性

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

多少像素的3D元素是從視圖的perspective屬性定義的，它允許改變3D元素是怎樣查看透視圖。定義時的perspective屬性是一個元素的子元素，透視圖，而不是元素本身。

語法如下：

perspective: number|none:

perspective屬性的值可以使以下兩種：

?number：元素距離視圖的距離，以像素計(jì)。

?none：默認(rèn)值，與0相同，不設(shè)置透視。

perspective-origin屬性定義3D元素基于的X軸和Y軸：它允許改變3D元素的底部位置。在為元素定義perspective-origin屬性時，其子元素會獲得透視效果，而不是元素本身。該屬性必須與 perspective屬性一同使用，而且只影響3D轉(zhuǎn)換元素。語法如下：

perspective-origin: x-axis y-axis:

【例題】使用perspective屬性

代碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

#div1{

position: relative;

height: 150px;

width: 150px;

margin: 50px;

padding:10px;

border: 1px solid black;

perspective:150;

-webkit-perspective:150; /* Safari and Chrome */

}

#div2{

padding:50px;

position: absolute;

border: 1px solid black;

background-color: pink;

transform: rotateX(45deg);

-webkit-transform: rotateX(45deg); /* Safari and Chrome */

}

</style>

</head>

<body>

<div id="div2">3D轉(zhuǎn)換</div>

</div>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)