perspective
觀點(diǎn)
英 [p??spekt?v]? ?美 [p?r?spekt?v]
css perspective屬性 語(yǔ)法
作用:perspective 屬性定義 3D 元素距視圖的距離,以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當(dāng)為元素定義 perspective 屬性時(shí),其子元素會(huì)獲得透視效果,而不是元素本身。
語(yǔ)法:perspective: number|none
說(shuō)明:number ? ?元素距離視圖的距離,以像素計(jì)。? ? none ? ?默認(rèn)值。與 0 相同。不設(shè)置透視。? ??
注釋:請(qǐng)與?perspective-origin?屬性一同使用該屬性,這樣您就能夠改變 3D 元素的底部位置。
css 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: yellow; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例