最好的實(shí)踐鸿竖，就是給定一個(gè)實(shí)踐的目標(biāo)去實(shí)踐沧竟。
目標(biāo)：利用 CSS3 的一些特性，繪制一個(gè)魔方缚忧，要可以玩轉(zhuǎn)的那種悟泵，即上下左右每一層都可以獨(dú)立旋轉(zhuǎn)。效果如下：
為了完成此效果闪水，將使用到以下相關(guān)概念和樣式：坐標(biāo)糕非、3D呈現(xiàn)、平移、旋轉(zhuǎn)朽肥。
（1）坐標(biāo)
屏幕的起點(diǎn)坐標(biāo)是(0,0,0)禁筏，往右遞增為 x 方向，使用 left 屬性表示衡招，往下走篱昔，遞增為 y 方向，使用 top 屬性表示始腾。而 3D 場(chǎng)景中 z 正方向（遞增）為走出屏幕到你面前的方向州刽。
但這個(gè)坐標(biāo)的起點(diǎn)不一定得是屏幕，只是遵循相同的方向浪箭。當(dāng)元素使用 position:absolute 來(lái)絕對(duì)定位時(shí)穗椅，其位置坐標(biāo)是以最近的 position:relative 父元素為(0,0,0) 來(lái)計(jì)算的，因此山林，我們繪制一個(gè)3D場(chǎng)景時(shí)房待，通常會(huì)定義一個(gè)最外層的 position:relative 元素來(lái)進(jìn)行場(chǎng)內(nèi)發(fā)揮。
以下完整的頁(yè)面代碼驼抹，會(huì)繪制一個(gè)x,y,z坐標(biāo)軸桑孩，會(huì)使用到本文涉及的各個(gè)內(nèi)容，后邊的內(nèi)容均以此頁(yè)面為基礎(chǔ)框冀，便于動(dòng)手體驗(yàn)流椒。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 魔方</title>
<!-- 樣式部分全寫(xiě)這里 -->
<style>
.wrap {
transform-style: preserve-3d;
width: 300px; height: 300px;
position: relative; /* 定位起點(diǎn)元素 */
border-top:solid 1px gray; /* x 軸 */
border-left:solid 1px gray; /* y 軸 */
/* 傾斜一點(diǎn)方能見(jiàn)立體效果 */
transform: rotateX(-30deg) rotateY(-30deg);
}
/* z 軸正方向 */
.zaxis_p {
position:absolute;
width : 300px;
height:1px;
border-top:solid 1px gray;
/* xy面上，90度立起來(lái)就是 z */
transform: rotateY(-90deg);
/* 立起來(lái)的旋轉(zhuǎn)點(diǎn) */
transform-origin:0 0 0;
}
/* z 軸負(fù)方向 */
.zaxis_n {
position:absolute;
width : 300px;
height:1px;
border-top:dashed 1px gray; /*（虛線）*/
transform: rotateY(90deg);
transform-origin:0 0 0;
}
</style>
</head>
<body style="padding:300px;">
<div class="wrap">
<div class="zaxis_p"></div>
<div class="zaxis_n"></div>
</div>
</body>
</html>
效果如下圖：
（2）3D 呈現(xiàn)
transform-style: preserve-3d;
上邊繪制的坐標(biāo)軸明也，最外層的 wrap 有 transform-style: preserver-3d 屬性宣虾，它表示，它是維持其三維態(tài)的温数，其子元素可在其三個(gè)維度空間施展绣硝。如果沒(méi)有此項(xiàng)，子元素在 z 空間上是沒(méi)有作用的撑刺，也即我們的 z 軸會(huì)變成一個(gè)點(diǎn)鹉胖。
（3）平移
沿著坐標(biāo)軸的方向保持姿勢(shì)移動(dòng)，對(duì)于 x 與 y 軸而言够傍，移動(dòng)可以通過(guò)改變 left甫菠，top 值來(lái)達(dá)到目的，對(duì)于 z 軸（x冕屯，y軸同樣適用）則使用平移樣式寂诱。如，讓元素在 z 軸上后移 200個(gè)像素安聘，讓其在上邊坐標(biāo)z軸的虛線上痰洒，我們可以使用：
transform: tanslateZ(-200px);
我們?cè)谧鴺?biāo)中添加一個(gè)元素瓢棒，其樣式定義如下：
.square {
position:absolute;
width:100px; height:100px;
background:green;
top:0; left:0;
transform:translateZ(-200px);
}
<div class="square"></div>
效果如下：
（4）旋轉(zhuǎn)
物體的旋轉(zhuǎn)與轉(zhuǎn)動(dòng)的軸心點(diǎn)有關(guān)，就像一個(gè)球丘喻，我們可以掛一根繩子轉(zhuǎn)大圈音羞，也可以直接轉(zhuǎn)它，這個(gè)軸心與以下樣式定義有關(guān)：
transform-origin:0 0 0;
后邊的這個(gè)" 0 0 0 "的值為相對(duì)位置仓犬，是以元素自身為起點(diǎn)來(lái)算的。所以舍肠，具體到每個(gè)元素搀继，這個(gè)(0,0,0)表示的是該元素的起點(diǎn)位置，與別的元素?zé)o關(guān)翠语。有關(guān)transform-origin 更多的描述與用法可參考相關(guān)資料叽躯。
有了旋轉(zhuǎn)軸心點(diǎn)，在方向上給個(gè)角度就可以了肌括。如点骑，繞 z 軸旋轉(zhuǎn) 45 度。
transform: rotateZ(45deg);
度數(shù)可正可負(fù)谍夭，每一根坐標(biāo)軸黑滴，把軸的正向?qū)?zhǔn)你的眼睛（對(duì)準(zhǔn)鼻梁也不錯(cuò)），此時(shí)紧索，順時(shí)針為正角度袁辈，逆時(shí)針為負(fù)角度。
旋轉(zhuǎn)的示例珠漂，在下邊的綜合示例中給出晚缩。
（5）動(dòng)畫(huà)
CSS3 形成動(dòng)畫(huà)效果有兩種方式，其本質(zhì)都是呈現(xiàn)樣式屬性值的變化過(guò)程媳危。
第一種方式
定義一個(gè)關(guān)鍵幀（@keyframes）樣式體表示變化過(guò)程荞彼，并取個(gè)名字。然后待笑，使用 animation 屬性指定該名字讓元素動(dòng)起來(lái)鸣皂。這種方式功能強(qiáng)大，對(duì)時(shí)間軸內(nèi)的動(dòng)畫(huà)定義能力強(qiáng)滋觉，可以按百分比定義每一段的屬性變化值签夭。我們以讓上邊定義的 square 在 z 軸上邊繞 z 軸轉(zhuǎn)邊從 -200px 平移到 200px 為例來(lái)體驗(yàn)一下。
/*設(shè)置動(dòng)畫(huà)關(guān)鍵幀椎侠，名字為 movez */
@keyframes movez {
0% { /* 從這樣的屬性開(kāi)始 */
transform: translateZ(-200px) rotateZ(0deg);
}
100% { /* 變化到這樣的屬性 */
transform: translateZ(200px) rotateZ(3600deg);
}
}
.square {
position:absolute;
width:100px; height:100px;
background:green;
top:0; left:0;
transform-origin:0 0 0;
/* 按 movez 來(lái)呈現(xiàn)動(dòng)畫(huà)過(guò)程 */
animation:movez 10s linear infinite;
}
效果如下：
第二種方式
使用屬性 transition 指定一個(gè)屬性和一個(gè)時(shí)長(zhǎng)第租，只要這個(gè)屬性值發(fā)生變化，它就按規(guī)定的時(shí)長(zhǎng)進(jìn)行漸變形成動(dòng)畫(huà)我纪。
我們回到平移的那個(gè) square慎宾，為其添加 transition 屬性丐吓，指明 transform，時(shí)長(zhǎng)設(shè)置為 5s趟据，即5秒券犁。
.square {
position:absolute;
width:100px; height:100px;
background:green;
top:0; left:0;
transform:translateZ(-200px);
/* 指定漸變屬性，時(shí)長(zhǎng) */
transition: transform 5s;
}
此時(shí)汹碱，我們來(lái)改變它的 transform 平移值：
<script>
setTimeout(
function(){
document.querySelector(".square").style.transform = "translateZ(200px)";
},
1000
);
</script>
效果如下粘衬，多么優(yōu)雅的一個(gè)變化過(guò)程，軟著陸咳促。
（6）小結(jié)
熟悉以上了這些概念與特性稚新，就有了達(dá)成魔方目標(biāo)的工具。更多特性若有興趣跪腹，可進(jìn)一步加深了解褂删，想象空間很大。
