Lösungen

wuerfel_menue.php

Quell Code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
  text-align: center;
  color:black;
  font-size:20px;
}

.container {
  height: 100px;
  width:100px;
  margin-top: 50px;
  margin-left:50%;
}

.dice {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  height: 100px;
  width: 100px;
  opacity: .6;
  border-radius: 50%;
  display: table;
  }

.container:hover .dice > .side {
  position: relative;
  transform: none;
  display: inline-table;
  vertical-align:top;
  margin: 2%;
  transition: .8s;
}

.container .dice > .side:hover {
  transform: scale(1.4);
}

a {
  text-decoration: none;
  color:#000;
  display: table-cell;
  vertical-align: middle; 
 }

.one {
transform: rotateX(90deg) translateZ(50px);
  background: #7F2900;
}

.two {
transform: translateZ(50px);
  background: #CCBF00;
  }

.three {
  transform: rotateY(90deg) translateZ(50px);
  background: #C44CFF;
  }

.four {
  transform: rotateY(180deg) translateZ(50px);
  background: #7F0055;
 
  }

.five {
  transform: rotateY(-90deg) translateZ(50px);
  background: #00BDFF;
 
  }

.six {
  transform: rotateX(-90deg) translateZ(50px);
  background: #7DFF00;
}
</style>
</head>
<body>
<div class="container">
    <div class="dice" onmouseout="start()" id="dice">
    	<div class="side one">
             <a href="">Home</a>
        </div>
        <div class="side two">
             <a href="">Forum</a>
        </div>
		<div class="side three">
             <a href="">chat</a>
        </div> 
		<div class="side four">
             <a href="">Gästebuch</a>
        </div>
		<div class="side five">
             <a href="">Kontact</a>
        </div>
		<div class="side six">
             <a href="">Shoutbox</a>
        </div>
	</div>
</div>
<script>
var min=1000;
var max=5000;
function sekunden(){
   var x = Math.round(Math.random() * (max - min)) + min;
   return x;
}
var min1=1;
var max1=2365;
function rotation(){
   var x1 = Math.round(Math.random() * (max1 - min1)) + min1;
   return x1;
}
var min11=1;
var max11=136;
function rotation1(){
   var x11 = Math.round(Math.random() * (max11 - min11)) + min11;
   return x11;
}

was=['+','-'];
var min3=0;
var max3=1;
function was1(){
   var x3 = Math.round(Math.random() * (max3 - min3)) + min3;
   return was[x3];
}

function dreh(){
    var nn=rotation();
    var nn1=rotation1();
    document.getElementById("dice").animate([
   { transform: 'rotateX('+nn+'deg) rotateY('+nn+'deg) ' }, 
   { transform: 'translateY('+was1()+nn1+'px) translateX('+was1()+nn1+'px)' }
], { 
  duration: sekunden(),
  iterations: 1
});

timer=setTimeout(function(){dreh()},sekunden())
}

$(".container").hover(function(){
       $(".container,.dice").css('width','100%');
       $("#dice").css("animation-play-state", "paused"); 
       $(".container").css('margin-left','0');
       clearTimeout(timer);
  },
   function(){
       $(".container").css('width','100px');
       $(".container").css('margin-left','50%');
       dreh();
  });
  dreh();
</script>