Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<body style="margin:0px;overflow:hidden" oncontextmenu="return false" onWheel="" onMouseWheel=""> <scene><scene> <object-3D id="0"> <side set="top">1</side> <side set="left">2</side> <side set="bottom">3</side> <side set="right">4</side> <side set="back">5</side> <side set="front">6</side> </object-3D> <object-3D id="0" style="position:relative;left:100px;-webkit-transform:translateZ(110px) translateX(300px) translateY(700px) rotateZ(60deg);"> <side set="top">1</side> <side set="left">2</side> <side set="bottom">3</side> <side set="right">4</side> <side set="back">5</side> <side set="front">6</side> </object-3D> <object-3D id="0" style="-webkit-transform:translateZ(110px) translateX(300px) translateY(500px) rotateY(45deg);"> <side set="top">1</side> <side set="left">2</side> <side set="bottom">3</side> <side set="right">4</side> <side set="back">5</side> <side set="front">6</side> </object-3D> </scene></scene>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
scene { height:100vh; width:100vw; display:block; transform-style:preserve-3d; perspective:1000000px; -ms-transform-style:preserve-3d; -ms-perspective:1000000px; -webkit-transform-style: preserve-3d; -webkit-perspective:1000000px; } scene object-3D { display:block; transform-style:preserve-3d; -ms-transform-style:preserve-3d; -webkit-transform-style: preserve-3d; } scene object-3D side { display:block; position:absolute; transform-style:preserve-3d; -ms-transform-style:preserve-3d; -webkit-transform-style: preserve-3d; } scene object-3D side[set="top"] { height:298px; width:198px; background:rgba(255,000,000,0.8); border:1px solid black; line-height:298px; text-align:center; font-size:1000%; transform:rotateX(90deg) translateZ(150px); -ms-transform:rotateX(90deg) translateZ(150px); -webkit-transform:rotateX(90deg) translateZ(150px); } scene object-3D side[set="left"] { height:398px; width:298px; background:rgba(000,255,000,0.8); border:1px solid black; line-height:398px; text-align:center; font-size:1000%; transform:rotateY(90deg) translateZ(50px); -ms-transform:rotateY(90deg) translateZ(50px); -webkit-transform:rotateY(90deg) translateZ(50px); } scene object-3D side[set="bottom"] { height:298px; width:198px; background:rgba(000,000,255,0.8); border:1px solid black; line-height:298px; text-align:center; font-size:1000%; transform:rotateX(-90deg) translateZ(250px); -ms-transform:rotateX(-90deg) translateZ(250px); -webkit-transform:rotateX(-90deg) translateZ(250px); } scene object-3D side[set="right"] { height:398px; width:298px; background:rgba(255,255,000,0.8); border:1px solid black; line-height:398px; text-align:center; font-size:1000%; transform:rotateY(-90deg) translateZ(150px); -ms-transform:rotateY(-90deg) translateZ(150px); -webkit-transform:rotateY(-90deg) translateZ(150px); } scene object-3D side[set="back"] { height:398px; width:198px; background:rgba(000,255,255,0.8); border:1px solid black; line-height:398px; text-align:center; font-size:1000%; transform:rotateY(-180deg) translateZ(150px); -ms-transform:rotateY(-180deg) translateZ(150px); -webkit-transform:rotateY(-180deg) translateZ(150px); } scene object-3D side[set="front"] { height:398px; width:198px; background:rgba(255,000,255,0.8); border:1px solid black; line-height:398px; text-align:center; font-size:1000%; transform:rotateY(0deg) translateZ(150px); -ms-transform:rotateY(0deg) translateZ(150px); -webkit-transform:rotateY(0deg) translateZ(150px); }
CSS
Autoformát
CSS reset
Až na konci
rot={rotate:{x:0,y:0,z:0},translate:{z:-1000,x:0,y:0},origin:{x:0,y:0,z:0}}; document.body.onmousedown=function(event) { var scene=document.querySelector("scene"); var startX=event.clientX; var startY=event.clientY; var holding=true; onmousemove=function(event) { if(!holding)return; deltaX=event.clientX-startX; deltaY=event.clientY-startY; var style=scene.style; if(event.button===0) //move { rot.translate.x+=deltaX; rot.translate.y+=deltaY; } else if(event.button===1) //?? { alert(1) } else if(event.button===2) //rotate { rot.rotate.x+=deltaY; rot.rotate.y-=deltaX; } style.transform=style.webkitTransform=style.msTransform="translateX("+rot.translate.x+"px) translateY("+rot.translate.y+"px) translateZ("+rot.translate.z+"px) rotateX("+rot.rotate.x+"deg) rotateY("+rot.rotate.y+"deg) rotateZ("+rot.rotate.z+"deg)"; startX=event.clientX; startY=event.clientY; } onmouseup=function() { holding=false; } }; document.onmousewheel=function(event) { if(event.wheelDelta>0)rot.translate.z+=1000; else rot.translate.z-=10; style=document.querySelector("scene").style; } function rotate(event){ var startX=event.clientX; var startY=event.clientY; var holding=true; var button=event.button; onmousemove=function(event){ if(!holding)return; var deltaX=event.clientX-startX; var deltaY=event.clientY-startY; if(button==1){rot.rotate.z+=deltaX} else{ rot.rotate.y+=deltaX/2; rot.rotate.x-=deltaY/2;} elem.style.webkitTransform='rotateX('+rot.rotate.x+'deg) rotateY('+rot.rotate.y+'deg) rotateZ('+rot.rotate.z+'deg) translateZ('+rot.translate.z+'px) translateY('+rot.translate.y+') translateX('+rot.translate.x+')'; startX=event.clientX; startY=event.clientY; }; onmouseup=function(){holding=false;}; if(!holding)return; }; function scale(event, elem){ if(event.wheelDelta>0)rot.translate.z+=200; else rot.translate.z-=200; elem.style.webkitTransform='rotateX('+rot.rotate.x+'deg) rotateY('+rot.rotate.y+'deg) rotateZ('+rot.rotate.z+'deg) translateZ('+rot.translate.z+'px) translateY('+rot.translate.y+') translateX('+rot.translate.x+')'; elem.style.webkitTransformOrigin="50% 50% "+rot.translate.z+"px"; };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>