CSS3 轉(zhuǎn)換屬性 2.perspective屬性
多少像素的3D元素是從視圖的perspective屬性定義的，它允許改變3D元素是怎樣查看透視圖。定義時(shí)的perspective屬性是一個(gè)元素的子元素，透視圖，而不是元素本身。
語法如下：
perspective: number|none:
perspective屬性的值可以使以下兩種：
?number：元素距離視圖的距離，以像素計(jì)。
?none：默認(rèn)值，與0相同，不設(shè)置透視。
perspective-origin屬性定義3D元素基于的X軸和Y軸：它允許改變3D元素的底部位置。在為元素定義perspective-origin屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。該屬性必須與 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="div1">
<div id="div2">3D轉(zhuǎn)換</div>
</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>