3D 相關 CSS 屬性及函數

在 3D 空間中轉換最重要幾個形態的是平移，旋轉與縮放，接下來將會介紹與制作一個 3D 效果立方體相關的 CSS 屬性及函數。

• transform-style
• perspective
• backface-visibility 

3D 空間

一個立方體，必然存在于一個 3D 空間，首先需要使用 CSS 指明該立方體處于 3D 空間中。

.cube {
  transform-style: preserve-3d;
}

通過 CSS 的屬性值 transform-style: preserve-3d 可以設置該元素的所有子元素都處于 3D 空間。

在科幻小說三體中，云天明講了三個故事，其中講到有一個深水王子，無論你在遠處看還是近處看，他都一般高，不會受距離增減的影響，不符合我們現實中「近大遠小」的透視規律。

正是有了透視距離，現實世界的事物才會有層次感，而在 CSS 的 3D 世界里，也有一個屬性代表透視距離。

.cube {
  perspective: 800px;
  // 觀察者眼睛位于上邊看的全面
  perspective-origin: 150% -150%;
}

與二維平面不同，在 3D 空間中多了一個 Z 軸，而與 Z 軸 垂直的平面構成了 Z 平面，即我們在 2D 方向上能夠看到的這個平面。

perspective 定義了觀察者眼睛與 Z=0 平面(即投影面)的距離，來制造一種空間感。

 

perspective 最小可設置為 1px，當它值越小時，物體在投影面上越大。如下圖所示

 

perspective-origin 代表觀察者眼睛的位置，默認居中

 

平移與坐標系: translate3d()

.cube {
  transform: translate3d(x, y, z);
}

translate3d(x, y, z) 定義了元素在 3D 空間沿坐標系的平移，而如果只在單軸上平移，則可以使用獨立的 API。

• translateX(x):     translate3d(x, 0, 0)
• translateY(y):     translate3d(0, y, 0)
• translateZ(z):     translate3d(0, 0, z)

當作 Z 軸方向平移時，正值代表離用戶越來越近，即在視覺效果上它會越來越大。負值則相反。具體視覺效果可參考 MDN 文檔。

一種他們在三維坐標系下的正方向如下所示：

 

translateZ | MDN^[1]

旋轉與原點: rotate3d() 與 transform-origin

.cube {
  transform: rotate3d(x, y, z, a);
}

rotate3d 定義了元素在 3D 空間的旋轉，旋轉相比平移來說，它要多一個指標：「旋轉軸，它根據從原點出發的向量 [x, y, z] 來確定旋轉軸。」

[x, y, z] 坐標自然由 rotate3d(x, y, z, a) 來指定，那如何確定原點呢？

原點坐標由屬性 transform-origin 來指定，如果只有前兩個值代表在 2D 平面，如果有三個值代表在 3D 空間。

?  

你可以通過圍繞各個坐標軸旋轉 180 度，來確定原點坐標

?  

.cube {
  transform-origin: 100px 100px 100px;
}

可以通過對一個立方體的旋轉對 rotate3d 有直觀的了解

正常放置

在正常狀態下，各面數字如下

 

rotateX(180deg)

沿 X 軸旋轉 180 度后，位面 2 面對用戶

 

rotateZ(180deg)

沿 Z 軸旋轉 180 度后，位面 1 面對用戶，但是翻轉了過來

 

通過 MDN 文檔也可以對各個轉換有更直觀的了解

• rotateX | MDN     ^[2]
• rotateY | MDN     ^[3]
• rotateZ | MDN     ^[4]
• transform-origin | MDN     ^[5]

一個立方體

對 CSS 3D 方面的屬性及值進行熟悉之后，就能夠很容易地畫出一個立方體。

一個立方體由六個面組成，分別使用 Up，Down，Left，Right，Front，Back 的首字母進行表示。使用 html 描述它的結構如下

<div class="cube-container">
  <div class="cube">
    <div class="face face-up">U</div>
    <div class="face face-down">D</div>
    <div class="face face-left">L</div>
    <div class="face face-right">R</div>
    <div class="face face-front">F</div>
    <div class="face face-back">B</div>
  </div>
</div>

• .cube-container: 為立方體提供布局，使之處于屏幕中心位置
• .cube: 表示該立方體容器
• .face: 表示該立方體的六個面

在 .cube 選擇器中聲明一個 3D 空間，指定 perspective 與 transform-style 屬性

.cube {
  perspective: 1500px;
  transform-style: preserve-3d;
}

為了立方體的美觀，優雅及調試方便，對立方體加入一些 3D 無關的樣式: 關于布局，顯示及色彩

為立方體提供一個 100px/100px 大小的容器，并處于屏幕正中，并且立方體每一面的字也垂直居中

$ width: 100px;

.cube-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

.cube {
  width: $width;
  height: $width;
  margin: $width;
}

.face {
  background: #f60;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #fff;
}

接下來對六個面做絕對定位，并且根據目標位置做適當的平移與旋轉即可組成立方體。

$width: 100px;

.face {
  width: $width;
  height: $width;
  position: absolute;

  &.face-up {
    transform: rotateX(90deg) translateZ($width / 2);
  }

  &.face-down {
    transform: rotateX(-90deg) translateZ($width / 2);
  }

  &.face-left {
    transform: rotateY(-90deg) translateZ($width / 2);
  }

  &.face-right {
    transform: rotateY(90deg) translateZ($width / 2);
  }

  &.face-front {
    transform: translateZ($width / 2);
  }

  &.face-back {
    transform: rotateX(180deg) translateZ($width / 2);
  }
}

效果圖如下

 

全部代碼如下

codepen^[6]

讓立方體動起來

此時 3D 空間的立方體已經成形，為了更加形象，我決定給它一個動畫。

下列 CSS 動畫使它繞著向量 [1, 1, 0] 永無停歇地旋轉。

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

.cube {
  animation: rotate 2s linear reverse infinite;
}

效果圖如下所示

 

來畫一個魔方

魔方由 27 個小塊組成，通過 translate3d 對 27 個小立方塊進行位移，即可得到一個魔方，代碼如下所示

mixin coordinate() {
  @for $x from 1 through 3 {
    @for $y from 1 through 3 {
      @for $z from 1 through 3 {
        .cube-#{$x}-#{$y}-#{$z} {
          transform: translate3d(($x - 2) * $width, ($y - 2) * $width, ($z - 2) * $width);
        }
      }
    }
  }
}

@include coordinate();