簡要教程
這是一款可互動的360度超炫3D旋轉(zhuǎn)立方體動畫特效。用戶可以使用鼠標(biāo)拖動立方體來查看各個面，或者通過點擊左側(cè)的導(dǎo)航鏈接頁可以切換到立方體相應(yīng)的面中。
使用方法
HTML結(jié)構(gòu)
該3D立方體特效使用的是一個
元素作為包裹容器，然后里面使用6個子
作為立方體的6各面，另外在立方體中還有一個小的立方體，它的6個面分別貼上不同的圖片。
CSS樣式
包裹容器.container設(shè)置了透視效果，由于IE瀏覽器不支持transform-style: preserve-3d;屬性，所以無法看到3D立方體效果。
.container {
position: relative;
margin: 0 auto;
width: 100vw;
height: 100vh;
overflow: hidden;
-webkit-perspective: 750px;
perspective: 750px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
在內(nèi)部容器.inner中修改透視的原點為屏幕的中心。
.container .inner {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50vw 50vw 0;
transform-origin: 50vw 50vw 0;
}
其它的樣式基本上就是制作一個立方體的樣式，關(guān)于使用CSS來制作3D立方體的詳細(xì)方法可以參看：CSS3 3D transforms系列教程-立方體。
JavaScript
該3D立方體特效中使用js代碼來控制鼠標(biāo)點擊立方體對的各個面時的動作，以及用戶用鼠標(biāo)拖動小立方體時的互動效果，和點擊左側(cè)鏈接導(dǎo)航時，旋轉(zhuǎn)到相應(yīng)的立方體面。
來源：http://www.htmleaf.com/css3/css3donghua/201603033176.html
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。