CSS Challenge #3 - Things are about to get dicey. CSS positioning.

**Michael Morris** · Feb 4, 2013 10:11

Today's challenge is to create a die face using the following HTML.

Code html:

<!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">
</style>
</head>
<body>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>	
</div>
</body>
</html>

You will need to set the containing box to position relative, then absolutely position the six child divs within it and user border radius to transform them into circles. Your result should look something like this...

testRender.png

Advanced Level Challenge
Using 3D transforms, present three sides of the die. You may modify the HTML as needed.

Expert Level Challenge
Spin the die 360 degrees on :hover.

I'll post the answer to the beginner level challenge on Friday. Other answers should be masked with spoilers using the following syntax
[code][spoiler]
Your solution goes here
[/spoiler][/code]

**Paul O'B** · Feb 4, 2013 10:37

Looks interesting Michael, I'll try and have a go at the advanced one later in the week when I have some spare time

**ServerStorm** · Feb 4, 2013 13:18

Very interesting Michael, even though I've never done a quiz before I look forward to taking this for a spin

**YuriKolovsky** · Feb 4, 2013 15:06

Hey, that sounds interesting, plus I think I've done something like this at one point already but I didn't use 3D transforms because they didn't exist :P

**markbrown4** · Feb 5, 2013 05:35

Beginner:

body > div {
background: red;
position: relative;
width: 100px;
height: 100px;
box-shadow: 5px 5px 5px;
}
div div {
position: absolute;
background: #fff;
width: 14px;
height: 14px;
border-radius: 10px;
margin-top: -7px;
}
div div:nth-child(1) {
top: 20px;
left: 20px;
}
div div:nth-child(2) {
top: 50px;
left: 20px;
}
div div:nth-child(3) {
top: 80px;
left: 20px;
}
div div:nth-child(4) {
top: 20px;
right: 20px;
}
div div:nth-child(5) {
top: 50px;
right: 20px;
}
div div:nth-child(6) {
top: 80px;
right: 20px;
}

**samvike** · Feb 5, 2013 08:24

Hi!

I just signed up to join the forum (well, apparently I had a never-before used account).
I love this kind of challenge

I've made an attempt at the expert level, but I'm unsure of how to post my entry without
any spoilers.

How do I post my challenge answer?

**xhtmlcoder** · Feb 5, 2013 08:38

Greetings samvike what you do is post your answer in this thread but wrap the answer in "spoiler tags" so it remains semi-hidden - greyed-out.

For example resulting in an answer that looks like: HTML5 Sucks!

[spoiler]Your Answer...[/spoiler]

Hope that helps a little as to how you hide the answer.

**samvike** · Feb 5, 2013 09:03

Thanks, xhtmlcoder.

So here's my attempt (Expert Level):

<< Spoiler alert! >>

Link to fiddle: http://jsfiddle.net/xjjs8/
( I hope linking is ok..? )

<!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">
@-webkit-keyframes spinCube {
100% {
-webkit-transform: rotateX(-25deg) rotateY(385deg) rotateZ(360deg);
}
}
.dice-outer {
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 50%;
-webkit-perspective: 500px;
}
.dice-outer:hover .dice {
-webkit-animation: spinCube 2.5s;
}
.dice {
width: 100px;
height: 100px;
position: relative;
-webkit-transform: rotateX(-25deg) rotateY(-25deg);
-webkit-transform: rotateX(-25deg) rotateY(25deg) rotateZ(0deg);
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% 50%;
}
.side {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
.a {
background: red;
-webkit-transform: rotateY(0deg);
}
.b {
background: green;
left: 50px;
-webkit-transform: rotateY(90deg) translateX(50px);
}
.c {
background: blue;
left: 50px;
-webkit-transform: rotateX(90deg) translate3d(-50px, -50px, 50px);
}
.d {
background: yellow;
left: 50px;
-webkit-transform: rotateY(-90deg) translate3d(-50px, 0, 100px);
}
.e {
background: purple;
left: 50px;
-webkit-transform: rotateX(-90deg) translate3d(-50px, 50px, 50px);
}
.f {
background: gray;
left: 50px;
-webkit-transform: rotateX(180deg) translate3d(-50px, 0px, 100px);
}
.side > div {
position: absolute;
background: white;
border-radius: 50%;
width: 20%;
height: 20%;
top: 10%;
}
.side > div:nth-child(odd) {
left: 15%;
}
.side > div:nth-child(even) {
left: 65%;
}
.side > div:nth-child(n+3) {
top: 40%;
}
.side > div:nth-child(n+5) {
top: 70%;
}
</style>
</head>

<body>
<div class="dice-outer">
<div class="dice">
<div class="side a">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="side b"></div>
<div class="side c"></div>
<div class="side d"></div>
<div class="side e"></div>
<div class="side f"></div>
</div>
</body>

</html>

So, I hope to see you guys' solutions

**Michael Morris** · Feb 5, 2013 09:34

Very cool, but couldn't help but go in and place the correct pips on each side.

<!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">
@-webkit-keyframes spinCube {
100% {
-webkit-transform: rotateX(-25deg) rotateY(385deg) rotateZ(360deg);
}
}
.dice-outer {
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 50%;
-webkit-perspective: 500px;
}
.dice-outer:hover .dice {
-webkit-animation: spinCube 2.5s;
}
.dice {
width: 100px;
height: 100px;
position: relative;
-webkit-transform: rotateX(-25deg) rotateY(-25deg);
-webkit-transform: rotateX(-25deg) rotateY(25deg) rotateZ(0deg);
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% 50%;
}
.side {
background: red;
width: 100px;
height: 100px;
background: red;
border: 1px solid #900;
position: absolute;
}
.a {
-webkit-transform: rotateY(0deg);
}
.b {
left: 50px;
-webkit-transform: rotateY(90deg) translateX(50px);
}
.c {
left: 50px;
-webkit-transform: rotateX(90deg) translate3d(-50px, -50px, 50px);
}
.d {
left: 50px;
-webkit-transform: rotateY(-90deg) translate3d(-50px, 0, 100px);
}
.e {
left: 50px;
-webkit-transform: rotateX(-90deg) translate3d(-50px, 50px, 50px);
}
.f {
left: 50px;
-webkit-transform: rotateX(180deg) translate3d(-50px, 0px, 100px);
}
.side > div {
position: absolute;
background: white;
border-radius: 50%;
width: 20%;
height: 20%;
top: 10%;
left: 15%;
}

.side.a > div:nth-child(even) { left: 65%; }
.side.a > div:nth-child(n+3) { top: 40%; }
.side.a > div:nth-child(n+5) { top: 70%; }

.side.b > div:nth-child(1) { left: 15%; }
.side.b > div:nth-child(2) {
top: 40%;
left: 40%;
}
.side.b > div:nth-child(3) {
left: 65%;
top: 70%;
}

.side.c > div:nth-child(2) { left: 65%; }
.side.c > div:nth-child(3) { top: 70%; }
.side.c > div:nth-child(4) {
left: 65%;
top: 70%;
}
.side.c > div:nth-child(5) {
top: 40%;
left: 40%;
}

.side.d > div:nth-child(even) { left: 65%; }
.side.d > div:nth-child(3), .side.d > div:nth-child(4) { top: 70%; }

.side.e > div:nth-child(1) { left: 15%; }
.side.e > div:nth-child(2) {
left: 65%;
top: 70%;
}

.side.f > div:nth-child(1) {
top: 40%;
left: 40%;
}

</style>
</head>

<body>
<div class="dice-outer">
<div class="dice">
<div class="side a">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="side b">
<div></div>
<div></div>
<div></div>
</div>
<div class="side c">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="side d">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="side e">
<div></div>
<div></div>
</div>
<div class="side f">
<div></div>
</div>
</div>
</body>

</html>

**samvike** · Feb 5, 2013 09:54

Beautiful

thanks Michael

**chilli11** · Feb 6, 2013 02:12

Basic Die:

<!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">
.die-wrapper{
width: 240px;
height: 240px;
margin: 160px auto;
position: relative;
background: red;
-webkit-box-shadow: 14px 14px 20px #000000;
box-shadow: 14px 14px 20px #000000;
}
.left-top-spot, .left-middle-spot, .left-bottom-spot, .right-top-spot, .right-middle-spot, .right-bottom-spot {
background: white;
height: 48px;
width: 48px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
position: absolute;
}
.left-top-spot, .left-middle-spot, .left-bottom-spot {
left: 30px;
}
.right-top-spot, .right-middle-spot, .right-bottom-spot {
left: 160px;
}
.left-top-spot, .right-top-spot {
top: 33px;
}
.left-middle-spot, .right-middle-spot {
top: 96px;
}
.left-bottom-spot, .right-bottom-spot {
top: 159px;
}
</style>
</head>
<body>
<div class="die-wrapper">
<div class="left-top-spot"></div>
<div class="left-middle-spot"></div>
<div class="left-bottom-spot"></div>
<div class="right-top-spot"></div>
<div class="right-middle-spot"></div>
<div class="right-bottom-spot"></div>
</div>
</body>
</html>

**capnkid** · Feb 6, 2013 05:30

Very basic, with no additional markup:

<!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">

/*//parent div*/
div {
border:3px solid #ccc;
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 200px;
position: relative;
border-radius: 5px;
background-color: red;
box-shadow: 5px 5px 5px #000;
}

/*//children dots*/
div div {
width: 30px;
height: 30px;
margin-top: 80px;
margin-left: 50px;
float: left;
border-radius: 30px;
background-color: white;
box-shadow: none;
}

</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

**YuriKolovsky** · Feb 6, 2013 13:40

I went straight into 3D transforms and my head popped, so went back to basics and here it is
<!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 2D - YuriKolovsky</title>
<style type="text/css">
body {
margin:50px 100px;
}
body > div {
width:192px;
height:192px;
background:red;
box-shadow:15px 15px 15px #000;
padding:24px;
}
div div {
float:left;
margin:8px 24px;
height:48px;
width:48px;
border-radius:24px;
background:#fff;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

**xhtmlcoder** · Feb 6, 2013 13:46

Go for the 'Expert Level Challenge' now Tim.

**HAWK** · Feb 6, 2013 19:33

I thought I'd jump into this thread with something that might be of interest.

In the same way that we offer sample chapters of our books, we also offer sample lessons on our courses.
Here is a sample lesson from Practical CSS with Russ Weakley.
It's a course based around interesting CSS tips and tricks, and you can chat with Russ using our Learnable Social application.

**aprylisnow** · Feb 7, 2013 00:47

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>

**Chevalric** · Feb 7, 2013 01:52

Here's my intermediate version as a jsbin:
http://jsbin.com/uhevan/2/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.die {
width: 180px;
height: 180px;
background: #f00;
padding: 20px;
position: relative;
}

.spot {
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
position: absolute;
}

.side-2 {
background:#c00;
height: 70px;
-webkit-transform: skew(-45deg) translate(55px);
}

.side-4 {
background: #a00;
width:71px;
display:inline-block;
-webkit-transform: skewy(-45deg) translatex(-5px) translatey(-60px);
box-shadow: 8px 10px 10px #555;
}

.side-6 {
display:inline-block;
box-shadow: 10px 5px 10px #555;
}

.side-2 .spot {
height: 30px;
}

.side-2 .spot-2 {
bottom: 20px;
right: 20px;
}

.side-4 .spot {
width: 30px;
height: 50px;

}

.side-6 .spot-2,
.side-6 .spot-4,
.side-6 .spot-6,
.side-4 .spot-2,
.side-4 .spot-4 {
right: 20px;
}

.side-6 .spot-3,
.side-6 .spot-4 {
top: 50%;
margin-top: -25px;
}

.side-6 .spot-5,
.side-6 .spot-6,
.side-4 .spot-3,
.side-4 .spot-4{
bottom: 20px;
}

</style>
</head>
<body>
<div class="die side-2">
<div class="spot spot-1"></div>
<div class="spot spot-2"></div>
</div>
<div class="die side-6">
<div class="spot spot-1"></div>
<div class="spot spot-2"></div>
<div class="spot spot-3"></div>
<div class="spot spot-4"></div>
<div class="spot spot-5"></div>
<div class="spot spot-6"></div>
</div>
<div class="die side-4">
<div class="spot spot-1"></div>
<div class="spot spot-2"></div>
<div class="spot spot-3"></div>
<div class="spot spot-4"></div>

</div>
</body>
</html>

Not sure if I've gotten the pips in the correct position.

**YuriKolovsky** · Feb 7, 2013 11:28

Hah, will do, my head is already dizzy with all the messed up logic around perspectives.

**aprylisnow** · Feb 7, 2013 12:32

I cleaned up the code a little bit, and added some more details.
I am finding a bug in my code for FF. The die always starts on .div4. I'm not sure why.
I'd appreciate some feedback.

<!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 {
padding:10px;
}
#myDice div {
position: absolute;
width: 220px;
height: 220px;
border: 1px solid #000;
text-align:center;
font-size: 40px;
-moz-box-shadow: 5px 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px 5px#888;
box-shadow: 5px 5px 5px 5px #888;
}
#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 center, circle, rgba(255, 255, 255, 1) 60%,transparent 41%,transparent 50%);*/
-moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
-webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
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 center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
-webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background-position: 20px 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 center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
-webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background-position: 20px 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 center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
-webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background-position: 20px 30px, 20px 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 center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
-webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background: radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
background-position: 20px 30px, 20px 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 center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -moz-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
-webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%), -webkit-radial-gradient(center center, circle, white 1%, white 40%, silver 45%, red 65%);
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(255, 255, 255, 1) 40%, transparent 41%, transparent 100%);
background-position: 20px 30px, 20px 100px, 20px 170px, 170px 30px, 170px 100px, 170px 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 {
-webkit-transform: rotateY(0deg) rotateZ(90deg) translateZ(110px);
}
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 {
-moz-transform: rotateY(0deg) rotateZ(90deg) translateZ(110px);
}

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>

**ronpat** · Feb 8, 2013 01:51

This is my entry into the Beginner's challenge. The code is not exciting... it can be done with fewer selectors. BUT, it does one thing quite well (which was my objective)... one can resize or reshape the box (the die) and the dots will remain in their relative positions. In fact, box dimensions, circle dimensions, and circle margins are the only adjustments likely to be utilized. No math is required beyond division by 2.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?969179-CSS-Challenge-3-Things-are-about-to-get-dicey-CSS-positioning
Thread: CSS Challenge #3 - Things are about to get dicey. CSS positioning.
Feb 4, 2013 11:11
Michael Morris
-->
<head>
    <title>Dicey - Positioning</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">
body > div {
    background-color:#f00;
    box-shadow:25px 25px 15px 0 #000;
    width:420px;             /* width  of box */
    height:420px;            /* height of box */
    position:relative;
    border-radius:25px;      /* corners of box; optional */
    margin:40px auto;        /* centers box on page; optional */
}
div div {
    position:absolute;
    width:90px;              /* diameter of circle */
    height:90px;             /* diameter of circle */
    border-radius:50%;
    background-color:#fff;
    margin:50px;             /* distance from edge of box */
}
div:nth-child(1),div:nth-child(2),div:nth-child(3) {left:0;}
div:nth-child(4),div:nth-child(5),div:nth-child(6) {right:0;}
div:nth-child(3),div:nth-child(6) {bottom:0}
div:nth-child(2),div:nth-child(4) {top:50%; margin-top:-45px;}    /* margin-top = -1/2 diameter of circle */
    </style>
</head>
<body>

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

**Michael Morris** · Feb 8, 2013 08:35

It's Friday, so today I'll go ahead and reveal the CSS behind the test render in the first post, and explain how it works. From here on out there's no need to spoil your code examples folks.

Code css:

body>div {
  position: relative;
  margin: 10em auto;
  width: 15em;
  height: 15em;
  background: red;  
  box-shadow: 1em 1em 1em black;
}

The first block draws the die itself and gives it a drop shadow. I personally favor 'em' as a unit of measurement - it's roughly equivalent to 16px on most devices, but it is a relative measurement meaning that it will change as the base font size element changes. Refer to the sitepoint reference on css measurements for more information. The die block is given a positioning of relative in order that its child divs, the dots, can be absolutely positioned relative to it, and not relative to the body.

Code css:

div>div {
  position: absolute;
  height: 3em;
  width: 3em;
  border-radius: 3em;
  background: white;
}

This creates the dots of the die face.

Code css:

div>div:nth-child(1) { top: 2em;  left: 2em; }
div>div:nth-child(2) { bottom: 2em;  left: 2em; }
div>div:nth-child(3) { top: 2em;  right: 2em; }
div>div:nth-child(4) { bottom: 2em;  right: 2em; }

The corner pips are set equidistant from their respective sides. The nth-child psuedo selector is seen here in its simplest form. Keep in mind that css child indexes start from 1, unlike most computer indexes which start from 0 (There are reasons programmers do this other than to just be difficult).

Code css:

div>div:nth-child(5) { top: 6em; left: 2em; }
div>div:nth-child(6) { top: 6em; right: 2em; }

Meanwhile the two side pips have to be positioned measured from the top because CSS lacks a true vertical centering approach (I'm aware of).

**Paul O'B** · Feb 8, 2013 15:48

Good work Michael

Here's my example (webkit and Firefox only):

http://www.pmob.co.uk/temp/rotate-cube6.htm

It just uses this simple html:

Code:

<div>
		<div>
				<div></div>
				<div></div>
				<div></div>
				<div><b></b></div>
				<div></div>
				<div></div>
		</div>
</div>

I can't take much credit for the transforms as I mainly borrowed bits and pieces from here and there and fiddled with it until it did what I wanted

**kevinthompson** · Feb 18, 2013 00:17

For my solution, I tried to complete the expert variant without modifying the original HTML: http://jsfiddle.net/HFD3j/

**Paul O'B** · Feb 18, 2013 03:08

Originally Posted by kevinthompson

For my solution, I tried to complete the expert variant without modifying the original HTML: http://jsfiddle.net/HFD3j/

Good example ( but note the two opposite numbers on a die should add up to 7

)

**Michael Morris** · Feb 18, 2013 07:44

<gamer geek>
Two opposite numbers on a die should add up to N+1, where N is the number of sides on the die. 7 for a six sided die, 13 for a 12 sided die, 21 for a 20 sided die and so on. d4's are an exception to this rule since there isn't an opposing side for the d4.
</gamer geek>

User Tag List

Thread: CSS Challenge #3 - Things are about to get dicey. CSS positioning.

Thread Tools

Display

CSS Challenge #3 - Things are about to get dicey. CSS positioning.

Bookmarks

Bookmarks

Posting Permissions