您好,登錄后才能下訂單哦!
小編給大家分享一下perspective屬性的使用方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
perspective屬性是用來(lái)定義 3D 元素距視圖的距離,以像素計(jì);它允許你改變 3D 元素查看 3D 元素的視圖。
CSS3 perspective屬性
作用:perspective 屬性定義 3D 元素距視圖的距離,以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當(dāng)為元素定義 perspective 屬性時(shí),其子元素會(huì)獲得透視效果,而不是元素本身。
注:perspective 屬性只影響 3D 轉(zhuǎn)換元素。
語(yǔ)法:
perspective: number|none;
number:元素距離視圖的距離,以像素計(jì)。
none:默認(rèn)值。與 0 相同。不設(shè)置透視。
說(shuō)明:該屬性要與 perspective-origin 屬性一同使用,這樣就能夠改變 3D 元素的底部位置。
CSS3 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>
效果圖:
看完了這篇文章,相信你對(duì)perspective屬性的使用方法有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(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)容。