CSS3 製作魔方相關立體樣式

最好的實踐，就是給定乙個實踐的目標去實踐。

目標：利用 css3 的一些特性，繪製乙個魔方，要可以玩轉的那種，即上下左右每一層都可以獨立旋轉。效果如下：

螢幕的起點座標是(0,0,0)，往右遞增為 x 方向，使用 left 屬性表示，往下走，遞增為 y 方向，使用 top 屬性表示。而 3d 場景中 z 正方向（遞增）為走出螢幕到你面前的方向。

但這個座標的起點不一定得是螢幕，只是遵循相同的方向。當元素使用 position:absolute 來絕對定位時，其位置座標是以最近的 position:relative 父元素為(0,0,0) 來計算的，因此，我們繪製乙個3d場景時，通常會定義乙個最外層的 position:relative 元素來進行場內發揮。

以下完整的頁面**，會繪製乙個x,y,z座標軸，會使用到本文涉及的各個內容，後邊的內容均以此頁面為基礎，便於動手體驗。

效果如下圖：

transform-style: preserve-3d;

上邊繪製的座標軸，最外層的 wrap 有 transform-style: preserver-3d 屬性，它表示，它是維持其三維態的，其子元素可在其三個維度空間施展。如果沒有此項，子元素在 z 空間上是沒有作用的，也即我們的 z 軸會變成乙個點。

沿著座標軸的方向保持姿勢移動，對於 x 與 y 軸而言，移動可以通過改變 left，top 值來達到目的，對於 z 軸（x，y軸同樣適用）則使用平移樣式。如，讓元素在 z 軸上後移 200個畫素，讓其在上邊座標z軸的虛線上，我們可以使用：

transform: tanslatez(-200px);

我們在座標中新增乙個元素，其樣式定義如下：

.square

效果如下：

物體的旋轉與轉動的軸心點有關，就像乙個球，我們可以掛一根繩子轉大圈，也可以直接轉它，這個軸心與以下樣式定義有關：

transform-origin:0 0 0;

後邊的這個" 0 0 0 "的值為相對位置，是以元素自身為起點來算的。所以，具體到每個元素，這個(0,0,0)表示的是該元素的起點位置，與別的元素無關。有關transform-origin 更多的描述與用法可參考相關資料。

有了旋轉軸心點，在方向上給個角度就可以了。如，繞 z 軸旋轉 45 度。

transform: rotatez(45deg);

度數可正可負，每一根座標軸，把軸的正向對準你的眼睛（對準鼻樑也不錯），此時，順時針為正角度，逆時針為負角度。

旋轉的示例，在下邊的綜合示例中給出。

css3 形成動畫效果有兩種方式，其本質都是呈現樣式屬性值的變化過程。

定義乙個關鍵幀（@keyframes）樣式體表示變化過程，並取個名字。然後，使用 animation 屬性指定該名字讓元素動起來。這種方式功能強大，對時間軸內的動畫定義能力強，可以按百分比定義每一段的屬性變化值。我們以讓上邊定義的 square 在 z 軸上邊繞 z 軸轉邊從 -200px 平移到 200px 為例來體驗一下。

/*設定動畫關鍵幀，名字為 movez */ @keyframes movez 100% } .square

效果如下：

使用屬性 transition 指定乙個屬性和乙個時長，只要這個屬性值發生變化，它就按規定的時長進行漸變形成動畫。

我們回到平移的那個 square，為其新增 transition 屬性，指明 transform，時長設定為 5s，即5秒。

.square

此時，我們來改變它的 transform 平移值：

效果如下，多麼優雅的乙個變化過程，軟著陸。

熟悉以上了這些概念與特性，就有了達成魔方目標的工具。更多特性若有興趣，可進一步加深了解，想象空間很大。

CSS3 製作魔方相關立體樣式

CSS3 製作魔方玩轉魔方

CSS3立體盒子的製作

CSS3製作404立體字型

CSS3 製作魔方 相關立體樣式

CSS3 製作魔方 玩轉魔方

CSS3立體盒子的製作

CSS3製作404立體字型

相關推薦

CSS3 製作魔方相關立體樣式

CSS3 製作魔方玩轉魔方