CSS3系列已經(jīng)學(xué)習(xí)了一段時(shí)間了，還獲得了較多網(wǎng)友的支持，在此謝過(guò)各位，你們的支持是我寫(xiě)文章最大的動(dòng)力^_^。

那么這一篇文章呢，主要是通過(guò)一個(gè)3D立方體的效果實(shí)例來(lái)深入了解css3的transform屬性，下面是這個(gè)實(shí)例的截圖，加上動(dòng)畫(huà)還能旋轉(zhuǎn)起來(lái)喲，是不是很酷炫？換上你喜歡的女生的照片，就可以大膽的撩妹了，哈哈！

初識(shí)transform

顧名思義：變換。就可以想到它可以做很多很多的事情了，這個(gè)屬性有很多的值，在這里簡(jiǎn)單列舉一下：

• translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定義位置的移動(dòng)距離。
• scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定義元素的縮放比例。
• rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定義元素的旋轉(zhuǎn)角度。
• skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定義元素的傾斜角度。

3D效果的認(rèn)知

我們可以看到這是一個(gè)三維的空間圖，不要被第一眼的復(fù)雜感嚇到，仔細(xì)分解一下其實(shí)還是很清晰的：反正就X軸、Y軸、Z軸三個(gè)方向嘛。

想象一下，假如你現(xiàn)在坐在電腦面前，電腦屏幕中心是原點(diǎn)，原點(diǎn)往右就是X軸正方向，往下就是Y軸正方向，往屏幕前方（也就是往人臉）的方向就是Z軸的正方向了。把坐標(biāo)軸的方向搞清楚了，上面的方法就能正確的使用了。

如果你覺(jué)得上面的解釋仍然太過(guò)于枯燥抽象，那就來(lái)舉個(gè)生活中的例子來(lái)對(duì)應(yīng)一下三個(gè)rotate屬性（rotateX、rotateY、rotateZ）吧：

如下圖：體操表演－繞著X軸旋轉(zhuǎn)就是rotateX（單杠就是X軸）

如下圖：鋼管舞表演－繞著Y軸旋轉(zhuǎn)就是rotateY（鋼管就是Y軸）

如下圖：轉(zhuǎn)盤(pán)旋轉(zhuǎn)－繞著Z軸在旋轉(zhuǎn)就是rotateZ（想象有一根繩子從轉(zhuǎn)盤(pán)的中心穿過(guò)，圖不好找＝＝）

perspective屬性

perspective的中文意思是：透視，視角！該屬性用來(lái)激活一個(gè)3D空間。

當(dāng)為元素定義perspective屬性時(shí)，其子元素都會(huì)獲得透視效果（使用了3D變換的元素）。所以一般來(lái)說(shuō)perspective屬性都應(yīng)用在父元素上，我們可以把這個(gè)父元素稱為舞臺(tái)元素。

只看解釋可能還是難以理解，我們還是用實(shí)例說(shuō)話吧：

從上圖可以看出，div1是div2的父元素，開(kāi)始我們給div2元素增加旋轉(zhuǎn)transform:rotateX(50deg)的時(shí)候，只感覺(jué)div2在平面上被’壓縮’了，沒(méi)有3D的效果，然后當(dāng)我們給父元素div1增加perspective: 150px;的時(shí)候，立馬就能看到3D的效果了，感受到他的神奇之處了吧。

另外，perspective的取值也一直是個(gè)謎，經(jīng)過(guò)我的多次查閱和測(cè)試，得出了一下幾個(gè)結(jié)論：

• 取值為none或不設(shè)置，就沒(méi)有3D空間。
• 取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
• 貌似當(dāng)取值為元素的寬度時(shí)，視覺(jué)效果比較好。

transform-style

transform-style指定嵌套元素如何在3D空間中呈現(xiàn)。

transform-style: flat | preserve-3d

flat是默認(rèn)值，表示所有子元素在2D平面呈現(xiàn)；preserve-3d表示所有子元素在3D空間中呈現(xiàn)。因此，我們想要實(shí)現(xiàn)一些3D效果的時(shí)候，transform-style: preserve-3d是少不了的。一般而言，該聲明應(yīng)用在3D變換的兄弟元素們的父元素上，我們可以叫它容器。

transform-origin

transform-origin用來(lái)改變?cè)氐脑c(diǎn)位置。

它的取值方式有很多種，下面我們通過(guò)實(shí)例（把背景為黃色的div順時(shí)針旋轉(zhuǎn)45deg）來(lái)介紹一下它的常用取值方式：

transform-origin:center（默認(rèn)值，等價(jià)于：center center/ 50% 50%）

transform-origin:top（等價(jià)于：top center/center top）

transform-origin:bottom（等價(jià)于：bottom center/center bottom）

transform-origin:right（等價(jià)于：right center/center right）

transform-origin:left（等價(jià)于：left center/center left）

transform-origin:top left（等價(jià)于：left top）

同理，還可以設(shè)置為：transform-origin:top right（右上角為原點(diǎn)）、transform-origin:bottom right（右下角為原點(diǎn)）、transform-origin:bottom left（左下角為原點(diǎn)）

繪制立方體效果

各位看官等不及了吧，講了那么多’廢話’，本篇文章的重頭戲終于來(lái)了！

dom結(jié)構(gòu)

<div class="rect-wrap">   //舞臺(tái)元素，設(shè)置perspective，讓其子元素獲得透視效果。
    <div class="container">    //容器，設(shè)置transform-style: preserve-3d，讓其子元素在3D空間呈現(xiàn)
        <div class="top slide"></div>   //立方體的六個(gè)面
        <div class="bottom slide"></div>
        <div class="left slide"></div>
        <div class="right slide"></div>
        <div class="front slide"></div>
        <div class="back slide"></div>
    </div>
</div>

css代碼

對(duì)于舞臺(tái)元素

.rect-wrap {
    position: relative;
    perspective: 1600px;
}

對(duì)于容器

.container {
    width: 800px;
    height: 800px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 200px; //設(shè)置3d空間的原點(diǎn)在平面中心再向Z軸移動(dòng)200px的位置
}

立方體的每個(gè)面

.slide {
    width: 400px;
    height: 400px;
    position: absolute;  //定位
}

立方體頂面

.top {
    left: 200px;
    top: -200px;
    transform: rotateX(-90deg);
    transform-origin: bottom;
}

立方體底面

.bottom {
    left: 200px;
    bottom: -200px;
    transform: rotateX(90deg);
    transform-origin: top;
}

立方體左面

.left {
    left: -200px;
    top: 200px;
    transform: rotateY(90deg);
    transform-origin: right;
}

立方體右面

.right {
    left: 600px;
    top: 200px;
    transform: rotateY(-90deg);
    transform-origin: left;
}

立方體前面

.front {
    left: 200px;
    top: 200px;
    transform: translateZ(400px);  //立方體前面正對(duì)著屏幕，所以不用旋轉(zhuǎn)，只需向Z軸前移動(dòng)距離
}

立方體后面

.back {
    left: 200px;
    top: 200px;
    transform: translateZ(0);   //立方體后面正對(duì)著屏幕，所以不用旋轉(zhuǎn)，只需向Z軸后移動(dòng)距離
}

最后別忘了給每個(gè)不同面加上圖片，位置什么的再稍微調(diào)一下，這個(gè)酷炫的立方體就大功告成了。

加動(dòng)畫(huà)

最后我們還想要這個(gè)立方體自己動(dòng)起來(lái)，我定義了一個(gè)動(dòng)畫(huà)，看官們可以試試。

@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(-180deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(-360deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(-180deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}

最后把這個(gè)動(dòng)畫(huà)用到這個(gè)立方體的容器元素上，就OK了：

.container{
    animation: rotate-frame 30s linear infinite;
}

需要代碼的同學(xué)可以點(diǎn)擊此處下載：demo

總結(jié)

總而言之，在我學(xué)習(xí)CSS3的過(guò)程中，見(jiàn)到了不少的新特性，也學(xué)會(huì)了如何使用，但是我想說(shuō)的是我們不管要學(xué)會(huì)怎么使用，更要去理解每一行代碼為什么產(chǎn)生對(duì)應(yīng)的效果，特別是對(duì)于3D transform，我們要從根本去理解了3D空間，才能更好的去掌握它的每一個(gè)屬性值能夠帶來(lái)的效果。

這篇文章內(nèi)容稍微有點(diǎn)多，自己記錄這篇文章的同時(shí)又對(duì)這個(gè)效果學(xué)習(xí)鞏固了一篇，還是蠻開(kāi)心噠。同時(shí)也希望能對(duì)各位看官在以后學(xué)習(xí)3D transform的道路上起到一點(diǎn)點(diǎn)作用！

最新評(píng)論