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>