[アプリケーション][js+css3]3Dボックスナビゲーション[PC]_html/css_WEB-ITnose

CSS3 で構築された 3D ボックスのナビゲーション アプリケーション

1. CSS3 で構築されたボックスの表面に iframe を配置して、ナビゲーション ページを読み込みます。

2. マウスの左ボタンを押して回転ボックスを移動し、目的の URL を見つけます。

3. スタンドアロンボックス面を左クリックすると、クリックしたボックス面のWebサイトが全画面表示され、閉じると元の状態に戻ります。 。

4. PC 側では、CSS3 で作られた 2 つの追加の回転ボックスが表示されます [これは意味がありません]

5. モバイル側では、ナビゲーション ボックスが 1 つだけ表示されます [ シミュレーターは正常ですが、実機は無効です。今後の検討に残されており、互換性の開発を改善する必要があります。 。 。 ]

注: 当初は、ナビゲーションがもっと楽しくなるようにナビゲーション ボックスを配置する予定でした

しかし、iframe を使用して Web サイトのプレビューを表示すると、速度が遅すぎてメモリを大量に消費します

html2canvas を試しましたが、クロスドメインの問題により、直接排除されました

解決策: サーバーを介して、よりリアルタイムの Web サイトのプレビューを表示します

---

実行可能コードのダウンロード アドレス

http://download .csdn.net/detail/wangxsh42/8522151

---

レンダリング

PC:

オンライン:

http://wangxinsheng.herokuapp.com/ 3dboxホーム

コードスニペット:

1.css3 ボックスビルド:

html:

 1 <div class="cubeOut" style="left:25%;top:35%"> 2     <div class='cube move'> 3         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 4         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 5         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 6         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 7         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 8         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 9     </div>10 </div>

css3:

 1 .cubeOut{ 2   height: 100%; 3   left: 50%; 4   margin-left: -10em; 5   margin-top: -10em; 6   -webkit-perspective: 1000px; 7   -ms-perspective: 1000px; 8   perspective: 1000px; 9   position: absolute;10   top: 50%;11   width: 100%;12   }13 .cube {14   height: 100%;15   position: absolute;16   -webkit-transform-style: preserve-3d;17   -ms-transform-style: preserve-3d;18   transform-style: preserve-3d;19   width: 100%;20   transform: rotateX(-35deg) rotateY(35deg);21 }22 .cubeOut .move{ -webkit-animation: 6s spin linear infinite;23   animation: 6s spin linear infinite;}24 .cube * {25   border: 2px solid rgba(54, 226, 248, 0.5);26   display: block;27   height: 100%;28   position: absolute;29   width: 100%;30 }31 .face {32   cursor:pointer;33   height: 100%;34   position: absolute;35   width: 100%;36 }37 .face:nth-child(1) {38   transform: rotateY(0deg) translateZ(150px);39   background: rgba(255, 102, 102, 0.75);40 }41 .face:nth-child(2) {42   transform: rotateY(90deg) translateZ(150px);43   background: rgba(179, 255, 102, 0.75);44 }45 .face:nth-child(3) {46   transform: rotateY(180deg) translateZ(150px);47   background: rgba(102, 255, 255, 0.75);48 }49 .face:nth-child(4) {50   transform: rotateY(270deg) translateZ(150px);51   background: rgba(178, 102, 255, 0.75);52 }53 .face:nth-child(5) {54   transform: rotateX(90deg) translateZ(150px);55   background: rgba(178, 102, 255, 0.75);56 }57 .face:nth-child(6) {58   transform: rotateX(-90deg) translateZ(150px);59   background: rgba(178, 102, 255, 0.75);60 }61 @keyframes spin {62   from {63     -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);64     transform: translateZ(-10em) rotateX(0) rotateY(0deg);65   }66 67   to {68     -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);69     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);70   }71 }72 @-webkit-keyframes spin {73   from {74     -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);75     transform: translateZ(-10em) rotateX(0) rotateY(0deg);76   }77 78   to {79     -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);80     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);81   }82 }

2.js 操作コード

iframe 読み込み操作 [スケール iframe サイズ、デフォルトは 1024 幅ですウェブサイト]

 1 $(".cube").find("iframe").each(function(i){ 2     if(this.attributes.url.value!=''){ 3     this.style.height = 1024+"px"; 4     this.style.width = 1024+"px"; 5     this.onload = this.onreadystatechange = iframeload; 6     this.src = this.attributes.url.value;} 7 }); 8  9 function iframeload() { 10     if(outFrame===this){return;}11     if (!this.readyState || this.readyState == "complete") {12         this.focus();13         this.style.transformOrigin = "left top";14         this.style.transform = "scale("+targetWidth/1024+")";15         this.style.display="block";16         $(this).attr("loaded","1");17     }18 }

ボックスの回転操作

 1 var overs = document.querySelectorAll(".fix .over"); 2 for(var i =0;i<overs.length;i++){ 3     if($(overs[i]).prev().prev().attr("url")!='') 4         overs[i].addEventListener("click", mouseclick, false); 5     overs[i].addEventListener("mousedown", mousedown, false); 6     document.addEventListener("mouseup", mouseup, false); 7     overs[i].addEventListener("mousemove", mousemove, false); 8 } 9 10 function mousedown(e){11     mouse.x=e.pageX;12     mouse.y=e.pageY;13     canmove = true;14 }15 function mouseup(e){16     mouse.x=null;17     mouse.y=null;18     canmove = false;19 }20 function mousemove(e){21     if(canmove && mouse.x!=null && mouse.y!=null){22         var ydeg=0,xdeg=0;23         xdeg = e.touches[0].pageX - mouse.x;24         ydeg = e.touches[0].pageY - mouse.y;25         xd =  (xd + xdeg)%360;26         yd = (yd -ydeg)%360;27         e.touches[0].target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";28         mouse.x=e.touches[0].pageX;29         mouse.y=e.touches[0].pageY;31     }32 }

ボックスのクリック操作

---

css3 3D ボックス コード リファレンス:

http://www.html5トリック.com/html5- anime-cube.html

http://www.html5tricks.com/html5-3d-cube.html

---

Chrome モバイル シミュレーターの効果 [

実機は現在無効です。後で確認してください。

]: