3d变换
CSS 屬性 perspective指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產生透視效果。 z>0 的三維元素比正常大，而 z<0 時則比正常小，大小程度由該屬性的值決定。
三維元素在觀察者后面的部分不會繪制出來，即 z 軸坐標值大于 perspective 屬性值的部分。
默認情況下，消失點位于元素的中心，但是可以通過設置 perspective-origin 屬性來改變其位置。
當該屬性值不為 0 和 none 時，會創建新的 層疊上下文。在這種情況下，容器內元素的層疊關系像是使用了 position: fixed 一樣。
景深作用：讓3d場景有近大遠小的效果，肉眼距離顯示器的距離，景深越大，元素離我們越遠，效果就不好。在css3中，perspective用于激活一個3d空間。
景深不可繼承，他作用于后代元素，
perspective:100px; //這個屬性必須在包裹器上
transform:perspective(100px) //這樣寫是作用于元素本身，要用這個函數必須放在首位（所以一般不hi用這個函數）
景深原理：控制滅點的位置。景深越大，滅點越遠，元素變形越小。
滅點：指的是立體圖形各條便的延伸線所產生的相交點
景深疊加：盡量避免景深疊加
- 3d旋轉：
- 3d平移：
- 3d縮放：
- CSS 屬性 transform-style 設置元素的子元素是位于 3D 空間中還是平面中。
- backface-visibility: hidden; /*隱藏背面*/
- 3d坐標軸
立方體：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>立方體</title><!--把盒子擺在上下左右前后幾個位置，再想辦法進行3d轉換--><style type="text/css">#wrap{width: 300px;height: 300px;border: 1px solid black;background: url(bg.png) no-repeat;background-size: 100% 100%;perspective: 200px;/*景深*/}#wrap > .box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;transition: 3s;transform-style: preserve-3d;/*3d舞臺,給div層級*/transform-origin: center center -50px; }#wrap > .box > div{position: absolute;width: 100px;height: 100px;font: 50px/100px "微軟雅黑";text-align: center;background-color: rgba(123,234,123,.3);backface-visibility: hidden; /*隱藏背面*/}/*上*/#wrap > .box >div:nth-child(5){top: -100px; /*正值往里，負值往外*/transform: rotateX(90deg);transform-origin: bottom;}/*下*/#wrap > .box >div:nth-child(6){bottom: -100px;transform: rotateX(-90deg);transform-origin: top;}/*左*/#wrap > .box >div:nth-child(3){left: -100px;transform: rotateY(-90deg);transform-origin: right;}/*右*/#wrap > .box >div:nth-child(4){right: -100px;transform: rotateY(90deg);transform-origin: left;}/*后*/#wrap > .box >div:nth-child(2){transform: translateZ(-100px) rotateX(180deg);}/*前*/#wrap >.box >div:nth-child(1){z-index: 1;}#wrap:hover .box{transform: rotate3d(1,2,3,360deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div></div></body> </html>立方體2：（設置統一的基點，通過旋轉構造立方體）（關鍵：找中心點）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>立方體</title><!----><style type="text/css">#wrap{width: 300px;height: 300px;border: 1px solid black;perspective: 200px;/*景深*/}#wrap > .box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;transition: 3s;transform-style: preserve-3d;/*3d舞臺,給div層級*/transform-origin: center center -50px; }#wrap > .box > div{position: absolute;width: 100px;height: 100px;font: 50px/100px "微軟雅黑";text-align: center;background-color: rgba(123,233,123,.3); transform-origin: center center -50px;}/*上*/#wrap > .box >div:nth-child(5){transform: rotateX(90deg);}/*下*/#wrap > .box >div:nth-child(6){transform: rotateX(-90deg);}/*左*/#wrap > .box >div:nth-child(3){transform: rotateY(-90deg);}/*右*/#wrap > .box >div:nth-child(4){transform: rotateY(90deg);}/*后*/#wrap > .box >div:nth-child(2){transform: rotateX(180deg);}/*前*/#wrap >.box >div:nth-child(1){z-index: 1;}#wrap:hover .box{transform: rotateX(360deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div></div></body> </html>（如果要隱藏背面設置backface-visibility:hidden）
三棱柱：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>三棱柱</title><style type="text/css">#wrap{width: 300px;height: 300px;border: 1px solid black;perspective: 200px;/*景深*/}#wrap > .box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;transition: 3s;transform-style: preserve-3d;/*3d舞臺,給div層級*/}#wrap > .box > div{position: absolute;width: 100px;height: 100px;font: 50px/100px "微軟雅黑";text-align: center;background-color: rgba(123,233,123,.3); transform-origin: center center -28.867513459481287px;/*計算中心點的位置*/}/*左*/#wrap > .box >div:nth-child(2){transform: rotateY(-120deg);}/*右*/#wrap > .box >div:nth-child(3){transform: rotateY(120deg);}/*前*/#wrap >.box >div:nth-child(1){z-index: 1;background-color: pink;}#wrap:hover .box{transform: rotateY(180deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>左</div><div>右</div></div></div></body> </html>多棱柱畫法：
關鍵：
1.第n個面旋轉度數：外角度數*n
2.找到內角度數，棱長，通過三角函數求中心點
總結
- 上一篇： 【网络学习】对TortoiseSVN的基
- 下一篇： 如何批量在文件夹中建立php,怎样快速实