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


#1

Today's challenge is to create a die face using the following 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...

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
[noparse]

[spoiler]
Your solution goes here
[/spoiler]

[/noparse]


#2

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


#3

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


#4

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 stuck_out_tongue


#5

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;
}


#6

Hi!

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

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?


#7

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. smile


#8

Thanks, xhtmlcoder.

So here's my attempt (Expert Level):

<< Spoiler alert! >>

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

[spoiler]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Dicey Challenge&lt;/title&gt;
    &lt;style type="text/css"&gt;
        @-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 &gt; div {
            position: absolute;
            background: white;
            border-radius: 50%;
            width: 20%;
            height: 20%;
            top: 10%;
        }
        .side &gt; div:nth-child(odd) {
            left: 15%;
        }
        .side &gt; div:nth-child(even) {
            left: 65%;
        }
        .side &gt; div:nth-child(n+3) {
            top: 40%;
        }
        .side &gt; div:nth-child(n+5) {
            top: 70%;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="dice-outer"&gt;
        &lt;div class="dice"&gt;
            &lt;div class="side a"&gt;
                &lt;div&gt;&lt;/div&gt;
                &lt;div&gt;&lt;/div&gt;
                &lt;div&gt;&lt;/div&gt;
                &lt;div&gt;&lt;/div&gt;
                &lt;div&gt;&lt;/div&gt;
                &lt;div&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="side b"&gt;&lt;/div&gt;
            &lt;div class="side c"&gt;&lt;/div&gt;
            &lt;div class="side d"&gt;&lt;/div&gt;
            &lt;div class="side e"&gt;&lt;/div&gt;
            &lt;div class="side f"&gt;&lt;/div&gt;
        &lt;/div&gt;
&lt;/body&gt;

</html>
[/spoiler]

So, I hope to see you guys' solutions smile


#9

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

[spoiler]

<!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>[/spoiler]


#10

Beautiful smile thanks Michael


#11

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>


#12

Very basic, with no additional markup:

[spoiler]
<!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>
[/spoiler]


#13

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>


#14

Go for the 'Expert Level Challenge' now Tim. smile


#15

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.


#16

It's not really pretty, but it gets the point across. This was lots of fun!!!! This was my first attempt at css animations.

[spoiler]
<!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>

[/spoiler]


#17

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

[spoiler]
<!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>
[/spoiler]

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


#18

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


#19

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.

[spoiler]
<!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>

[/spoiler]


#20

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. smile

[spoiler]
<!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>


[/spoiler]