css如何實現(xiàn)一個3D效果的魔方

可以通過對一個立方體的旋轉(zhuǎn)對 rotate3d 有直觀的了解

正常放置

在正常狀態(tài)下，各面數(shù)字如下

 

rotateX(180deg)

沿 X 軸旋轉(zhuǎn) 180 度后，位面 2 面對用戶

 

rotateZ(180deg)

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

 

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

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

一個立方體

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

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

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

為了立方體的美觀，優(yōu)雅及調(diào)試方便，對立方體加入一些 3D 無關(guān)的樣式: 關(guān)于布局，顯示及色彩

為立方體提供一個 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;
}

接下來對六個面做絕對定位，并且根據(jù)目標位置做適當?shù)钠揭婆c旋轉(zhuǎn)即可組成立方體。

$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 空間的立方體已經(jīng)成形，為了更加形象，我決定給它一個動畫。

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

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