css3創建3D場景

瀏覽器本身是一個2維平面，對於3D的情況，實際上是增加了一個維度（深度），所以我們需要創建一個3D場景。這時瀏覽器不僅僅是一個平面了，更像是一個窗口，我們透過這個窗口去觀察里面的三維世界。所謂的創建3D場景，就是告訴瀏覽器，我們是在這個窗口的哪個角度對這個3維世界進行觀察，窗口里的3維物體距離這個窗口到底有多遠。

設置好3D場景后，瀏覽器中的物體雖然已經變成是3維的了，但是如果我們不進行任何設置，他們看起來還是和二維的效果是一樣的。所以我們需要使用一個新的屬性 transform 來對這些元素進行調整，以展現出他們的3維效果。事實上對於 transform 這個屬性同樣也適用於2D的場景，所以為了讓瀏覽器知道我們現在所使用的 transform 調整元素是在一個3維空間下，我們需要加上這樣一個屬性：transform-style:preserve-3d;-webkit-transform-style:preserve-3d;

 

 

一個例子：

html：

<nav>
    <a href="#"><span data-hover="Hello">Hello</span></a>
</nav>

css：

/*基本樣式*/
*{padding:0;margin:0;font-family:'微軟雅黑';box-sizing:border-box;}
nav{width:100%;height:200px;background:#0e83cd;padding:50px 100px;}
a{width:160px;height:45px;display:inline-block;line-height:45px;text-align:center;text-decoration:none;margin:10px 20px;font-size:24px;}
span{width:100%;display:inline-block;color:#fff;background:#2195de;padding:0 10px;position:relative;}

/*3d效果樣式*/
a{
    -webkit-perspective:1000px;
}
a span{
    -webkit-transform-origin:0 0;
    -webkit-transform-style:preserve-3d;
    -webkit-transition:-webkit-transform 0.3s;
}
a span::before{
    content:attr(data-hover);
    position:absolute;left:0;top:100%;
    width:100%;height:100%;background:#0965a0;
    -webkit-transform-origin:0 0;
    -webkit-transform-style:preserve-3d;
    -webkit-transform:rotateX(-90deg);
    -webkit-transition:background 0.3s;
}
a:hover span{
    -webkit-transform:rotateX(90deg) translateY(-22px);
}
a:hover span::before{
    background:#2195de;
}

css樣式分析：（這里是只針對Chrome瀏覽器做的demo）

一、在需要3d效果的元素的父級創建3D場景，也就是添加下面兩條屬性。

-webkit-perspective:1000px;

-webkit-perspective-origin:(50% 50%);  --默認值，沒有做設置。

二、具體到每個3d效果的元素，需首先設置下面兩條屬性，

-webkit-transform-style:preserve-3d;  --3d效果必須加上這一條，也是固定不變的一條。

-webkit-transform-origin:(0 0);  --根據需求設置前兩個參數

然后具體添加transform的變換屬性。

三、一個疑惑，暫未找到原因

a:hover span{
    -webkit-transform:rotateX(90deg);
    -webkit-transform:rotateX(90deg) translateY(-22px);
    -webkit-transform:translateY(-22px) rotateX(90deg);
}

在 -webkit-transform 中 rotateX(90deg) 和 translateY(-22px) 的調用順序不同，得到的的效果會有差別。

 

注意點：

1、CSS3 perspective-origin 屬性的默認值為(50% 50%)，一般情況不需要設置，保持默認即可以。

2、CSS3 transform-origin 屬性的默認值為(50% 50% 0)，一般情況需要根據需求設置前兩個參數。

transform-origin屬性允許您更改轉換元素的位置。2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。

3、注意 perspective-origin 與 transform-origin 的區分，別弄混了。