Du kan lett gjøre en masse eksperimenter med denne boksen. Du kan endre innholdet på flatene, du kan "ta av lokket",
og du kan kanskje putte noe oppi.
Brukbar til illustrasjoner, datapresentasjon og andre ting ?
Du kan klikke på kantene eller i midten og du kan bruke piltastene.
Dette er toppen
Klikk eller bruk piltastene
Du ser det blir litt rart når du piler opp eller ned,
eller klikker på kantene.
Et klikk på midten og du er i rute igjen.
Det er noe her som kan forbedres. Jaja... når jeg får tid
eller du kan jo fikse det !
Disse flatene kan jo fylles med hva som helst, kanskje en video eller en canvas.
Det er også mulig å ta vekk en side så vi kan kikke oppi boksen
eller du kan begrense bevegelsen til å være bare vertikal eller bare horisontal
Dette er undersiden
Utfordringen hvis vi skal bruke denne til å vise 6 forskjellige sider, med innhold som er retningsbestemt, på en fornuftig måte
er å holde orden på vinklene. Dersom vi nøyer oss med å bruke de 4 sidekantene (altså droppe topp og bunn)
er det greitt nok. Vi dropper ganske enkelt rotasjonen om x-aksen.
Stilsettet
#wrapper {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
perspective: 800px;
perspective-origin: 50% 200px;
transform: scale(0.5, 0.5);
}
#cube {
position: relative;
margin: 0px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
}
.face {
width: 360px;
height:360px;
position: absolute;
padding: 20px;
background: rgba(255,255,255,1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 27px;
text-align: center;
line-height: 1em;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
border: 1px solid #555;
border-radius: 30px;
}
/* translateZ 200px below must
match half of cube dim 400px
*/
#cube .top {
-webkit-transform: rotateX(90deg) translateZ(200px);
/*-moz-transform: rotateX(90deg) translateZ(200px);*/
transform: rotateX(90deg) translateZ(200px);
}
#cube .front {
-webkit-transform: translateZ(200px);
/*-moz-transform: translateZ(200px);*/
transform: translateZ(200px);
}
#cube .right{
-webkit-transform: rotateY(90deg) translateZ(200px);
/*-moz-transform: rotateY(90deg) translateZ(200px);*/
transform: rotateY(90deg) translateZ(200px);
}
#cube .back {
-webkit-transform: rotateY(180deg) translateZ(200px);
/*-moz-transform: rotateY(180deg) translateZ(200px);*/
transform: rotateY(180deg) translateZ(200px);
}
#cube .left {
-webkit-transform: rotateY(-90deg) translateZ(200px);
/*-moz-transform: rotateY(-90deg) translateZ(200px);*/
transform: rotateY(-90deg) translateZ(200px);
}
#cube .bottom{
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
/*-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);*/
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
JavaScriptet
// globals
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
var prop;
var xAngle = 0;
var yAngle = 0;
var faceW=0;
var faceH=0;
// id of stylesheet
var cubesheet="cubestyles";
function setUp(){
// identify properties that are relevant for this browser
var el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
// pick up original cube dimensions
// so we can control clickpositions
var styleSheet= document.getElementById(cubesheet).sheet;
var myrules=styleSheet.cssRules;
for(i=0; i < myrules.length; i++){
if(myrules[i].selectorText=="#cube"){
faceW=parseInt(myrules[i].style.getPropertyValue("width"));
faceH=parseInt(myrules[i].style.getPropertyValue("height"));
break;
}
}
// set up click-action
document.querySelector("#cube").
addEventListener('click', clickChange ,false);
// set up key-action
document.getElementsByTagName("body")[0].
addEventListener('keydown', keyChange ,false);
change(30,30);
}
// when keypressed
function keyChange(evt){
switch(evt.keyCode) {
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle += 90;
evt.preventDefault();
break;
case 39: // right
yAngle += 90;
break;
case 40: // down
xAngle -= 90;
evt.preventDefault();
break;
};
change(xAngle,yAngle);
}
// when clicked
function clickChange(evt){
//console.log(evt);
var relX=evt.layerX;
var relY=evt.layerY;
console.log(xAngle,yAngle);
if(relX > 3*faceW/4)
yAngle+=90;
else if(relX < faceW/4)
yAngle-=90;
if(relY > 3*faceH/4)
xAngle-=90;
else if(relY < faceH/4)
xAngle+=90;
// reset with a centered click
if((relX > faceW/4)&&
(relX < 3*faceW/4)&&
(relY > faceH/4)&&
(relY < 3*faceH/4)){
xAngle=yAngle=0;
}
change(xAngle,yAngle);
}
// do it
function change(xA,yA){
document.getElementById('cube').style[prop] =
"rotateX("+xA+"deg) rotateY("+yA+"deg)";
}
Den relevante HTML-koden
<div id="wrapper" >
<div id="cube">
<div class="face top">
Dette er toppen
</div>
<div class="face front">
Klikk eller bruk piltastene
<img style="height:70%" src="images/gent1.png" />
</div>
<div class="face right">
Du ser det blir litt rart når du piler opp eller ned,
eller klikker på kantene.
Et klikk på midten og du er i rute igjen.
Det er noe her som kan forbedres. Jaja... når jeg får tid<br/><br/>
eller du kan jo fikse det !
</div>
<div class="face back">
Disse flatene kan jo fylles med hva som helst, kanskje en video eller en canvas.
</div>
<div class="face left">
Det er også mulig å ta vekk en side så vi kan kikke oppi boksen
<br/><br/>
eller du kan begrense bevegelsen til å være bare vertikal eller bare horisontal
</div>
<div class="face bottom">
Dette er undersiden
<img style="height:70%" src="images/lady1.png" />
</div>
</div>
</div>
<script>
setUp();
</script>
På en enklere side:
