Web Design with HTML5 + CSS3 Special Effects :: Create Rotating Cubes

Jeb Riordan, Project Manager | Web Developer | jebriordan.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (12m)
    • 1. Introduction: Create HTML5/CSS3 Spinning Dice

      1:21
    • 2. Create the HTML Code

      0:47
    • 3. Style the Body and the Cube

      2:54
    • 4. Move the Cube Into 3D Space

      1:45
    • 5. Make the Magic Happen

      2:50
    • 6. Let the Dice Drop

      2:50

Project Description

OK for the class project.

In a real life dice, the sum of the numbers on opposite sides of the dice add up to 7

In our cube, that is not the case:

1 - 4 = 5
2 - 5 = 7
3 - 6 = 9

So what do we need to do to correct that?

Hint: There’s an easy way and there’s a hard way. Your choice ;]

Please post your answer and any comments in the project area

And watch out for more special effects using just HTML5 and CSS3

Jeb Riordan

Resources(2)

Student Projects