css3 — 3D變形
阿新 • • 發佈：2020-10-31
transform為3D 變形增加了3個函式
rotateX： 元素沿x軸旋轉
rotateY： 元素沿Y軸旋轉
rotateZ： 元素沿Z軸旋轉
transfor-style：flat | preserve-3d 用於設定箱套的子元素在3d空間顯示的效果
perspective: number | none; 定義 3D 元素距檢視的距離，以畫素計。該屬性允許您改變 3D 元素檢視 3D 元素的檢視。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
註釋：perspective 屬性隻影響 3D 轉換元素。
<!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(30deg); } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>