使用純CSS3實現一個3D旋轉的書本

有一些前沿的電商網站已經開始使用3D模型來展示商品並支持在線定製，而其中圖書的展示是最爲簡單的一種，

無需複雜的建模過程，使用圖片和CSS3的一些變換即可實現更好的展示效果，簡潔而實用。

書本的3D模型是所有商品中最爲簡單的，因爲其本質上就是一個立方體（cube），只是帶有封面/封底和左側封條。

所以要構造一個3D書本展示，問題就被分解爲構造一個立方體+旋轉+圖片背景。

1. 構造一個立方體

要創建一個立方體，首先我們需要創建一個虛擬的三維視覺空間，這可以通過設置包容器元素的perspective屬性獲得。

.stage {
    width: 200px;
    height: 260px;
    perspective: 1000px;
    perspective-origin: center center;// 缺省值，可忽略
}

上述代碼把元素放在距離觀察點1000px的地方（Z軸向），並且在X/Y軸向上居中。

<div class="stage">
    <div class="cube">
        <figure class="back"></figure>
        <figure class="top"></figure>
        <figure class="bottom"></figure>
        <figure class="left"></figure>
        <figure class="right"></figure>
        <figure class="front"></figure>
  </div>
</div>

接着，我們在包容器元素裏面添加一個立方體元素，6個邊（上下左右和前後），之所以使用figure，是因爲需要支持貼圖。

我們需要根據書本的厚度和長寬來確定立方體各個面的座標位置，在本例中所用書本模型（一本MySQL書）的絕對厚度爲18.2px，高度260px，寬度197.6px。

那麼根據簡單的幾何知識，前後面距離立方體中心的距離爲18.2/2=9.1px，其中“後”元素需要再翻轉一下（即“背”過去）。

.front {
    transform: translateZ(9.1px);
}
.back {
    transform: rotateY(180deg) translateZ(9.1px);
}

用類似的計算方法，我們可以把其他4條邊放置（平移+旋轉變換）到各自的位置，從而拼裝成一個虛擬的立方體。

.front {
    transform: translateZ(9.1px);
}
.back {
    transform: rotateY(180deg) translateZ(9.1px);
}
.top {
    transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);
    width: 18.2px;
    height: 197.6px;
}
.bottom {
    transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);
}
.left {
    transform: rotateY(-90deg) translateZ(9.1px);
    width: 18.2px;
}
.right {
    transform: rotateY(90deg) translateZ(188.5px);
    width: 18.2px;
}

2. 添加封面

接着我們給前後以及左側面元素添加背景圖（可以使用一張圖，然後從不同的位置截取），給其他3個面添加背景顏色，並給“底”面添加陰影效果：

.front {
    transform: translateZ(9.1px);
    background: url("//wow.techbrood.com/uploads/160301/mysql.png") top right;
    background-size: auto 100%;
}
.back {
    transform: rotateY(180deg) translateZ(9.1px);
    background: url("//wow.techbrood.com/uploads/160301/mysql.png") top left;
    background-size: auto 100%;
}
.top {
    transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px);
    background: #fafafa;
    width: 18.2px;
    height: 197.6px;
}
.bottom {
    transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px);
    background: #ccc;
    width: 18.2px;
    height: 197.6px;
    -webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75));
}
.left {
    transform: rotateY(-90deg) translateZ(9.1px);
    background: url("//wow.techbrood.com/uploads/160301/mysql.png") top center;
    background-size: auto 100%;
    width: 18.2px;
}
.right {
    transform: rotateY(90deg) translateZ(188.5px);
    background: #ddd;
    background-size: auto 100%;
    width: 18.2px;
}

這樣我們就實現了一個逼真的3D書本視覺模型。

3. 添加旋轉動畫

這個比較簡單，使用rotateY方法就可以。

@-webkit-keyframes rotate {
    0% {
        transform: rotateY(0) translateX(-18.2px);
    }
    100% {
        transform: rotateY(360deg) translateX(-18.2px);
    }
}

最終的效果圖如下：

你可以在踏得網上自己試試看 （http://wow.techbrood.com/fiddle/17587）。

by iefreer