Navigation application of 3D box built with CSS3

1. Place an iframe on the surface of the box built with CSS3 to load the navigation page.

2. Press the left mouse button to move the rotating box and find the desired URL.

3. Left-click on the stand-alone box surface, and the website on the clicked box surface will be displayed in full screen [in an iframe] and can be browsed. After closing, it will return to the original state.

4. On the PC side, two additional rotating boxes made of CSS3 will be displayed [no sense]

5. On the mobile side, only one navigation box will be displayed [The simulator is normal, the real machine Invalid, leave it for future review, and compatibility development needs to be improved. . . ]

Note: I originally planned to arrange the navigation boxes so that the navigation would become more fun

However, if Iframe is used to display the website preview Otherwise, the speed is too slow and consumes too much memory

I tried using html2canvas, but due to cross-domain issues, it was directly destroyed

Solution: The server returns a more real-time preview of the website

---

Executable code download address

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

---

Rendering

PC version:

Online:

http://wangxinsheng.herokuapp.com/3dboxHome

Code snippet:

1.css3 box build:

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 operation code

iframe loading operation [Scale iframe size, visit website with 1024 width by default]

 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 }

Box rotation operation

 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 }

Box click operation

 1     function mouseclick(e){ 2         var index = $(e.target.parentNode.parentNode.parentNode).find(".over").index($(e.target)); 3         switch(index){ 4             case 0: 5                 xd = 0; 6                 yd = 0; 7                 break; 8             case 1: 9                 xd = -270;10                 yd = 0;11                 break;12             case 2:13                 xd = -180;14                 yd = 0;15                 break;16             case 3:17                 xd = -90;18                 yd = 0;19                 break;20             case 4:21                 xd = 0;22                 yd = -90;23                 break;24             case 5:25                 xd = 0;26                 yd = 90;27                 break;28             default:;29         }30         outFrame = e.target.parentNode.parentNode.getElementsByTagName("iframe")[index];31         32         if($(outFrame).attr("loaded")=="0")33             return;34             35         $(e.target).unbind();36         mouse.x=null;37         mouse.y=null;38         canmove = false;39         e.target.parentNode.parentNode.parentNode.style.zIndex="1000";40         $("#grayDiv").remove();41         $("body").append("<div id='grayDiv' style='position:absolute;left:0px;top:0px;background-color:rgba(0,0,0,0.8);z-index:999;width:"+window.innerWidth+"px;height:"+window.innerHeight+"px;'></div>");42         43         e.target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";44         $(outFrame).attr("loaded","0");45         outFace = $(e.target).prev();46         $(outFrame).appendTo("#grayDiv");47         $(outFrame).attr("scrolling","auto");48         outFrame.style.transform = "scale("+1+")";49         $(outFrame).css("height",window.innerHeight+"px");50         $(outFrame).css("width",window.innerWidth+"px");51         e.target.parentNode.parentNode.parentNode.style.zIndex="2";52         $("<div id='close' style='position:absolute;left:0;top:0;'>關(guān)閉</div>").appendTo("#grayDiv");53         $("#close").click(function(e){54             $(outFrame).insertBefore(outFace);55             $(outFrame).attr("scrolling","no");56             outFrame.style.transform = "scale("+targetWidth/1024+")";57             $(outFrame).css("height",1024+"px");58             $(outFrame).css("width",1024+"px");59             outFrame = null;60             outFace = null;61             $("#grayDiv").remove();62         });63     }

---

css3 3D box code reference:

http://www.html5tricks.com/ html5-animated-cube.html

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

---

chrome mobile emulator Effect [The real machine is currently invalid, leave it to be checked later]: