It’s not really pretty, but it gets the point across. This was lots of fun!!! This was my first attempt at css animations.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <title>Dicey Challenge</title>
<style type=“text/css”>
body{
counter-reset:section;
}
#myDice {background-color:red;}
#myDice div { position: absolute; width: 220px; height: 220px; border: 1px solid #000; text-align:center; font-size: 40px; }
#myDice div:before{counter-increment:section;
}
#myDice .div1 { -webkit-transform: translateZ(110px); -moz-transform:rotateY(0deg) rotateZ(0deg) translateZ(110px);
background:
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 50%);
background-position: 100px 100px;
background-size: 20px 20px;
background-repeat: no-repeat;
background-color:red;
}
#myDice .div2 { -webkit-transform: rotateY(90deg) translateZ(110px); -moz-transform: rotateY(90deg) translateZ(110px);
background:
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);
background-position: 10px 30px,
170px 170px;
background-size: 20px 20px,
20px 20px;
background-repeat: no-repeat;
background-color:red;
}
#myDice .div3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(110px); -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(110px);
background:
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);
background-position: 10px 30px,
100px 100px,
170px 170px;
background-size: 20px 20px,
20px 20px,
20px 20px;
background-repeat: no-repeat;
background-color:red;
}
#myDice .div4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px); -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px);
background:
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);
background-position: 10px 30px,
10px 170px,
170px 30px,
170px 170px;
background-size: 20px 20px,
20px 20px,
20px 20px,
20px 20px;
background-repeat: no-repeat;
background-color:red; }
#myDice .div5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px); -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px);
background:
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 50%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 50%);
background-position: 10px 30px,
10px 170px,
100px 100px,
170px 30px,
170px 170px;
background-size: 20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px;
background-repeat: no-repeat;
background-color:red; }
#myDice .div6 { -webkit-transform: rotateX(-90deg) translateZ(110px); -moz-transform: rotateX(-90deg) translateZ(110px);
background:
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 50%,transparent 41%,transparent 50%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
background-position: 10px 30px,
10px 100px,
10px 170px,
150px 30px,
150px 100px,
150px 170px;
background-size: 20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px;
background-repeat: no-repeat;
background-color:red;
}
#myDice .div1 { -webkit-transform: translateZ(110px); -moz-transform:translateZ(110px); }
@-webkit-keyframes rollMe { from,to
{
}
15% { -webkit-transform: rotateY(-90deg); }
30% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
45% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
65% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
80% { -webkit-transform: rotateX(90deg); }
}
@-moz-keyframes rollMe { from,to
{
}
15% { -moz-transform: rotateY(-90deg);}
30% { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
45% { -moz-transform: rotateY(-180deg) rotateZ(90deg); }
65% { -moz-transform: rotateY(90deg) rotateX(90deg); }
80% { -moz-transform: rotateX(90deg); }
}
#myDice:hover {
-webkit-animation-name: rollMe;
-moz-animation-name: rollMe;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-origin: 110px 110px 0;
-moz-transform-origin: 110px 110px 0; }
</style>
</head> <body>
<div id=“myDice” >
<div class=“div1”></div>
<div class=“div2”></div>
<div class=“div3”></div>
<div class=“div4”></div>
<div class=“div5”></div>
<div class=“div6”></div>
</div>
</body>
</html>