CSS3 3D立方體效果－transform也不過如此

CSS3系列已經學習了一段時間了，第一篇文章寫了一些css3的奇技淫巧，原文戳這裏，還得到了較多網友的支持，在此謝過各位，大家的支持是我寫文章最大的動力^_^。

那麼這一篇文章呢，主要是經過一個3D立方體的效果實例來深刻了解css3的transform屬性，下面是這個實例的截圖，加上動畫還能旋轉起來喲，是否是很酷炫？換上你喜歡的女生的照片，就能夠大膽的撩妹了，哈哈！想要查看demo，請點擊這裏，3D transform立方體效果

初識transform

顧名思義：變換。就能夠想到它能夠作不少不少的事情了，這個屬性有不少的值，在這裏簡單列舉一下：

• translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定義位置的移動距離。

• 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)：定義元素的旋轉角度。

• skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定義元素的傾斜角度。

3D效果的認知

咱們能夠看到這是一個三維的空間圖，不要被第一眼的複雜感嚇到，仔細分解一下其實仍是很清晰的：反正就X軸、Y軸、Z軸三個方向嘛。

想象一下，假如你如今坐在電腦面前，電腦屏幕中心是原點，原點往右就是X軸正方向，往下就是Y軸正方向，往屏幕前方（也就是往人臉）的方向就是Z軸的正方向了。把座標軸的方向搞清楚了，上面的方法就能正確的使用了。

若是你以爲上面的解釋仍然太過於枯燥抽象，那就來舉個生活中的例子來對應一下三個rotate屬性（rotateX、rotateY、rotateZ）吧：

以下圖：體操表演－繞着X軸旋轉就是rotateX（單槓就是X軸）

以下圖：鋼管舞表演－繞着Y軸旋轉就是rotateY（鋼管就是Y軸）

以下圖：轉盤旋轉－繞着Z軸在旋轉就是rotateZ（想象有一根繩子從轉盤的中心穿過，圖很差找＝＝）

perspective屬性

perspective的中文意思是：透視，視角！該屬性用來激活一個3D空間。

當爲元素定義perspective屬性時，其子元素都會得到透視效果（使用了3D變換的元素）。因此通常來講perspective屬性都應用在父元素上，咱們能夠把這個父元素稱爲舞臺元素。

只看解釋可能仍是難以理解，咱們仍是用實例說話吧：

從上圖能夠看出，div1是div2的父元素，開始咱們給div2元素增長旋轉transform:rotateX(50deg)的時候，只感受div2在平面上被‘壓縮’了，沒有3D的效果，而後當咱們給父元素div1增長perspective: 150px;的時候，立馬就能看到3D的效果了，感覺到他的神奇之處了吧。

另外，perspective的取值也一直是個謎，通過個人屢次查閱和測試，得出了一下幾個結論：

• 取值爲none或不設置，就沒有3D空間。

• 取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。

• 貌似當取值爲元素的寬度時，視覺效果比較好。

transform-style

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

transform-style: flat | preserve-3d

flat是默認值，表示全部子元素在2D平面呈現；preserve-3d表示全部子元素在3D空間中呈現。

所以，咱們想要實現一些3D效果的時候，transform-style: preserve-3d是少不了的。通常而言，該聲明應用在3D變換的兄弟元素們的父元素上，咱們能夠叫它容器。

transform-origin

transform-origin用來改變元素的原點位置。

它的取值方式有不少種，下面咱們經過實例（把背景爲黃色的div順時針旋轉45deg）來介紹一下它的經常使用取值方式：

• transform-origin:center（默認值，等價於：center center/ 50% 50%）

• transform-origin:top（等價於：top center/center top）

• transform-origin:bottom（等價於：bottom center/center bottom）

• transform-origin:right（等價於：right center/center right）

• transform-origin:left（等價於：left center/center left）

• transform-origin:top left（等價於：left top）

• 同理，還能夠設置爲：transform-origin:top right（右上角爲原點）、transform-origin:bottom right（右下角爲原點）、transform-origin:bottom left（左下角爲原點）

繪製立方體效果

各位看官等不及了吧，講了那麼多‘廢話’，本篇文章的重頭戲終於來了！

dom結構

<div class="rect-wrap">   //舞臺元素，設置perspective，讓其子元素得到透視效果。
    <div class="container">    //容器，設置transform-style: preserve-3d，讓其子元素在3D空間呈現
        <div class="top slide"></div>   //立方體的六個面
        <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代碼

• 對於舞臺元素

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

• 對於容器

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

• 立方體的每一個面

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

• 立方體頂面

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

• 立方體底面

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

• 立方體左面

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

• 立方體右面

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

• 立方體前面

  .top {
      left: 200px;
      top: 200px;
      transform: translateZ(400px);  //立方體前面正對着屏幕，因此不用旋轉，只需向Z軸前移動距離
  }

• 立方體後面

  .top {
      left: 200px;
      top: 200px;
      transform: translateZ(0);   //立方體後面正對着屏幕，因此不用旋轉，只需向Z軸後移動距離
  }

  最後別忘了給每一個不一樣面加上圖片，位置什麼的再稍微調一下，這個酷炫的立方體就大功告成了。

加動畫

最後咱們還想要這個立方體本身動起來，我定義了一個動畫，看官們能夠試試。

@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);
    }
}

最後把這個動畫用到這個立方體的容器元素上，就OK了：

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

總結

總而言之，在我學習CSS3的過程當中，見到了很多的新特性，也學會了如何使用，可是我想說的是咱們無論要學會怎麼使用，更要去理解每一行代碼爲何產生對應的效果，特別是對於3D transform，咱們要從根本去理解了3D空間，才能更好的去掌握它的每個屬性值可以帶來的效果。

這篇文章內容稍微有點多，本身記錄這篇文章的同時又對這個效果學習鞏固了一篇，仍是蠻開心噠。同時也但願能對各位看官在之後學習3D transform的道路上起到一點點做用！