簡要教程
這是一款可互動的360度超炫3D旋轉立方體動畫特效。用戶可以使用鼠標拖動立方體來查看各個面，或者通過點擊左側的導航鏈接頁可以切換到立方體相應的面中。
使用方法
HTML結構
該3D立方體特效使用的是一個
元素作為包裹容器，然后里面使用6個子
作為立方體的6各面，另外在立方體中還有一個小的立方體，它的6個面分別貼上不同的圖片。
CSS樣式
包裹容器.container設置了透視效果，由于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;
}
在內部容器.inner中修改透視的原點為屏幕的中心。
.container .inner {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50vw 50vw 0;
transform-origin: 50vw 50vw 0;
}
其它的樣式基本上就是制作一個立方體的樣式，關于使用CSS來制作3D立方體的詳細方法可以參看：CSS3 3D transforms系列教程-立方體。
JavaScript
該3D立方體特效中使用js代碼來控制鼠標點擊立方體對的各個面時的動作，以及用戶用鼠標拖動小立方體時的互動效果，和點擊左側鏈接導航時，旋轉到相應的立方體面。
來源：http://www.htmleaf.com/css3/css3donghua/201603033176.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。