css3-3D轉換
阿新 • • 發佈：2021-10-20
今天我們來了解一下3D 轉換方法
rotateX（）
rotateY（）
transform-style（）
perspective（）
perspective-origin（）屬性定義 3D 元素所基於的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置
backface-visibility（）隱藏被旋轉的 div 元素的背面
1.rotateX（）方法，圍繞其在一個給定度數X軸旋轉的元素
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */ }
2.rotateY（）方法，圍繞其在一個給定度數Y軸旋轉的元素
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */ }
3.transform-style，使被轉換的子元素保留其3D轉換，有兩個屬性值：flat (子元素將不保留其3D位置) | preserve-3d(子元素將保留其3D位置)
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateY(60deg); transform-style: preserve-3d; -webkit-transform: rotateY(60deg); /* Safari and Chrome */ -webkit-transform-style: preserve-3d; /* Safari and Chrome */ } #div3 { padding:40px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateY(80deg);-webkit-transform: rotateY(-60deg); /* Safari and Chrome */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO <div id="div3">YELLOW</div> </div> </div> </body> </html>
4.perspective（）方法，規定3D元素的透視效果
例如第一個方法rotate（），是不是從人的視覺感受，旋轉後好像變形一樣，沒有看到我們想要的效果，perspective（）方法體現了，安排
<style> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:150px; -webkit-perspective:150px; /* Safari and Chrome */ } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style>
<div id="div1"> <div id="div2">HELLO</div> </div>
是不是一下子有那種感覺了哈哈