無需復(fù)雜的建模過程，使用圖片和CSS3的一些變換即可實現(xiàn)更好的展示效果，簡潔而實用。
書本的3D模型是所有商品中最為簡單的，因為其本質(zhì)上就是一個立方體（cube），只是帶有封面/封底和左側(cè)封條。
所以要構(gòu)造一個3D書本展示，問題就被分解為構(gòu)造一個立方體+旋轉(zhuǎn)+圖片背景。
1. 構(gòu)造一個立方體要創(chuàng)建一個立方體，首先我們需要創(chuàng)建一個虛擬的三維視覺空間，這可以通過設(shè)置包容器元素的perspective屬性獲得。
.stage { width: 200px; height: 260px; perspective: 1000px; perspective-origin: center center;// 缺省值，可忽略}我們需要根據(jù)書本的厚度和長寬來確定立方體各個面的坐標(biāo)位置，在本例中所用書本模型（一本MySQL書）的絕對厚度為18.2px，高度260px，寬度197.6px。
那么根據(jù)簡單的幾何知識，前后面距離立方體中心的距離為18.2/2=9.1px，其中“后”元素需要再翻轉(zhuǎn)一下（即“背”過去）。
.front { transform: translateZ(9.1px);}.back { transform: rotateY(180deg) translateZ(9.1px);}.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;}.front { transform: translateZ(9.1px); background: url("http://wow.techbrood.com/uploads/160301/mysql.png") top right; background-size: auto 100%;}.back { transform: rotateY(180deg) translateZ(9.1px); background: url("http://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("http://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;}這個比較簡單，使用rotateY方法就可以。
@-webkit-keyframes rotate { 0% { transform: rotateY(0) translateX(-18.2px); } 100% { transform: rotateY(360deg) translateX(-18.2px); }}你可以在踏得網(wǎng)上自己試試看 （http://wow.techbrood.com/fiddle/17587）。
by iefreer
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
