有一些前沿的電商網(wǎng)站已經(jīng)開(kāi)始使用3D模型來(lái)展示商品并支持在線定制，而其中圖書的展示是最為簡(jiǎn)單的一種，無(wú)需復(fù)雜的建模過(guò)程，使用圖片和CSS3的一些變換即可實(shí)現(xiàn)更好的展示效果，簡(jiǎn)潔而實(shí)用。
書本的3D模型是所有商品中最為簡(jiǎn)單的，因?yàn)槠浔举|(zhì)上就是一個(gè)立方體（cube），只是帶有封面/封底和左側(cè)封條。 所以要構(gòu)造一個(gè)3D書本展示，問(wèn)題就被分解為構(gòu)造一個(gè)立方體+旋轉(zhuǎn)+圖片背景。
1. 構(gòu)造一個(gè)立方體
要?jiǎng)?chuàng)建一個(gè)立方體，首先我們需要?jiǎng)?chuàng)建一個(gè)虛擬的三維視覺(jué)空間，這可以通過(guò)設(shè)置包容器元素的perspective屬性獲得。

上述代碼把元素放在距離觀察點(diǎn)1000px的地方（Z軸向），并且在X/Y軸向上居中。
接著，我們?cè)诎萜髟乩锩嫣砑右粋€(gè)立方體元素，6個(gè)邊（上下左右和前后），之所以使用figure，是因?yàn)樾枰С仲N圖。
我們需要根據(jù)書本的厚度和長(zhǎng)寬來(lái)確定立方體各個(gè)面的坐標(biāo)位置，在本例中所用書本模型（一本MySQL書）的絕對(duì)厚度為18.2px，高度260px，寬度197.6px。
那么根據(jù)簡(jiǎn)單的幾何知識(shí)，前后面距離立方體中心的距離為18.2/2=9.1px，其中“后”元素需要再翻轉(zhuǎn)一下（即“背”過(guò)去）。
用類似的計(jì)算方法，我們可以把其他4條邊放置（平移+旋轉(zhuǎn)變換）到各自的位置，從而拼裝成一個(gè)虛擬的立方體。
2. 添加封面
接著我們給前后以及左側(cè)面元素添加背景圖（可以使用一張圖，然后從不同的位置截取），給其他3個(gè)面添加背景顏色，并給“底”面添加陰影效果：
這樣我們就實(shí)現(xiàn)了一個(gè)逼真的3D書本視覺(jué)模型。
3. 添加旋轉(zhuǎn)動(dòng)畫
這個(gè)比較簡(jiǎn)單，使用rotateY方法就可以。

最終的效果圖如下：

關(guān)于CSS3實(shí)現(xiàn)3D旋轉(zhuǎn)書本 的全部?jī)?nèi)容小編就給大家介紹這么多，希望對(duì)大家有所幫助！
原文：http://blog.csdn.net/iefreer/article/details/50931478

最新評(píng)論