perspective和tramsform-style
阿新 • • 發佈：2018-12-15
perspective 屬性定義 3D 元素距檢視的距離，以畫素計。該屬性允許您改變 3D 元素檢視 3D 元素的檢視。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
提示：請與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3D 元素的底部位置。
tramsform-style:使被轉換的子元素保留其 3D 轉換;
語法：transform-style: flat|preserve-3d;
transform-style 屬性規定如何在 3D 空間中呈現被巢狀的元素。
註釋：該屬性必須與 transform
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>perspective</title> <style> .contain { width: 200px; height: 200px; padding:10px; box-sizing: border-box; border: 1px solid yellow; // perspective: 500px; } .ct1 { width: 180px; height: 180px; line-height: 180px; border:1px solid #ccc; // transform-style: preserve-3d; transform:rotateX(45deg); background:red; text-align: center; color:greenyellow; } </style> </head> <body> <div class="contain"> <div class="ct1"> 1 </div> </div> </body> </html>
通過設定perspective的屬性可以明顯看到區別；
perspective：的相容性不是很好，