3d变换
CSS 屬性 perspective指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。 z>0 的三維元素比正常大，而 z<0 時則比正常小，大小程度由該屬性的值決定。
三維元素在觀察者后面的部分不會繪制出來，即 z 軸坐標(biāo)值大于 perspective 屬性值的部分。
默認(rèn)情況下，消失點位于元素的中心，但是可以通過設(shè)置 perspective-origin 屬性來改變其位置。
當(dāng)該屬性值不為 0 和 none 時，會創(chuàng)建新的 層疊上下文。在這種情況下，容器內(nèi)元素的層疊關(guān)系像是使用了 position: fixed 一樣。
景深作用：讓3d場景有近大遠(yuǎn)小的效果，肉眼距離顯示器的距離，景深越大，元素離我們越遠(yuǎn)，效果就不好。在css3中，perspective用于激活一個3d空間。
景深不可繼承，他作用于后代元素，
perspective:100px; //這個屬性必須在包裹器上
transform:perspective(100px) //這樣寫是作用于元素本身，要用這個函數(shù)必須放在首位（所以一般不hi用這個函數(shù)）
景深原理：控制滅點的位置。景深越大，滅點越遠(yuǎn)，元素變形越小。
滅點：指的是立體圖形各條便的延伸線所產(chǎn)生的相交點
景深疊加：盡量避免景深疊加
- 3d旋轉(zhuǎn)：
- 3d平移：
- 3d縮放：
- CSS 屬性 transform-style 設(shè)置元素的子元素是位于 3D 空間中還是平面中。
- backface-visibility: hidden; /*隱藏背面*/
- 3d坐標(biāo)軸
立方體：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>立方體</title><!--把盒子擺在上下左右前后幾個位置，再想辦法進(jìn)行3d轉(zhuǎn)換--><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; /*正值往里，負(fù)值往外*/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：（設(shè)置統(tǒng)一的基點，通過旋轉(zhuǎn)構(gòu)造立方體）（關(guān)鍵：找中心點）
<!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>（如果要隱藏背面設(shè)置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>多棱柱畫法：
關(guān)鍵：
1.第n個面旋轉(zhuǎn)度數(shù)：外角度數(shù)*n
2.找到內(nèi)角度數(shù)，棱長，通過三角函數(shù)求中心點
總結(jié)
- 上一篇： 【网络学习】对TortoiseSVN的基
- 下一篇： KIEL编译程序中的KEIL与ERROR