[Application][js css3]3D box navigation[PC]_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:43
Original
1167 people have browsed it

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>
Copy after login

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 }
Copy after login

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 }
Copy after login

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 }
Copy after login

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;'>关闭</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     }
Copy after login

---

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]:

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template