tom data -m 過去 截取 ood post clas kit

有一些前沿的電商站點已經開始使用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

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