Web Design with HTML5 + CSS3 Special Effects :: Create Rotating Cubes | Jeb Riordan | Skillshare

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

About This Class

Combine HTML and CSS in Your Web Design to Make Awesome Special Effects.

With the introduction of HTML5 and CSS3 there is a whole bunch of special effects that we can include in our web development without a single PHP,  jquery, or java script

And that’s a good thing right?

In this series of short classes we’ll explore a whole range of special effects to brighten up our web design as well as showing our site visitors what we want them to do.

In this class we’ll create:

A Rotating Cube or Dice. Not really useful, but will add interest for your site visitors.

And you get to use your coding skills, right...

Watch out for more web design with HTML5 and CSS3 short classes. Coming soon: Fancy buttons, sliding images and carousels...

Transcripts

1. Introduction: Create HTML5/CSS3 Spinning Dice : with the introduction of Hasty Amount five and CSS three. There is a whole bunch of special effects that we can include in our weapons designs without a single PHP Jake Weary or JavaScript. And that's a good thing, right? In this series of short classes, we'll explore a whole range of special effects to brighten up our websites as well as showing our site visitors. What we want them to do on in this class will create a spinning cube or spinning dice. The result isn't really useful. It could be used as a time filler while files download well anyway, it looks cool, and we get to use some of CSS three key frames and explore some three D transforms. This class is one of a series where we create special effects with HTML five and CSS three that you can use on your website today. Just like this. Hi, I'm Jim Meriden, a project manager turned whip developer, but that's enough about me, right? If you want to brighten up your website, make it more fun for your readers than follow along with this Siris of classes because coming soon are fancy buttons, sliding images and car sales. So enrolled in the class and let's make a spinning dice 2. Create the HTML Code: for this demonstration. I'm only creating a HTML file called Coop Test, not HTML, and I plan to at the CSS styling in the head of the document. So let's start with the HTML code, which is very simple and I'm using brackets is my text editor inside the body tank. We have a div with class cube spinner and inside that our 60 IBS, representing the six sides of the Cube with classes face one through face six. And in the Preiser, I'm using the chrome browser. We have the numbers 136 for the numbers on the size of the Cube, and that's it for the HTML. 3. Style the Body and the Cube: Let's start with the body and to center. The cube on the page will use the display flex, justify Content Center for the Horizontal century on the line item center for the vertical century, and will make the page height the same as the View port. 100%. So in the browser always see are the six faced ifs, with the numbers one through six in the center of the screen. Now we'll give some styling to the outer Tiv, the diff with the class cube spinner. This is going to be animated later with the key frames, so we give the animation a name. Spin Cube, the shape of the speaker of his ease in out, giving it a slow start. In a slow end, we're going to keep the cute spinning by giving it an infant alteration. Count on the duration of the whole. Animation is set to 12 seconds. Nothing changes in the browser. Next, we need to make sure all the sites of the Cube are positioned within three D space rather than flan into the plane of the parent element. But we do that by adding transformed style equals preserved three D to the parent element, the dip with class cube spinner and adding Transformed Star preserved. Three. Dietz. The parent element indicates that the Children of the element should be positioned in three D space on it will only be applied to chart elements that have a transformed property specified. Remember that for later and then we need to position the origin of the Cube. Spin it tive by adding transform origin 60 pixel 60 pixel zero that is Thea Alum int pivots around a point which is offset in the X and Y dimensions and zero offset in the Zet Dimension and 60 pixels is half the width and half the height of the cube itself, as we'll see in a minute. So that's the animation. Taking care off on in the breasts and change. Let's now start the faces of the cube position absolute. With respect to its parent the width and height 1 20 pixel, one pixel, solid border color gray in the box shadow on the inside with 0.2 level of a papers Texas align center with a font size 100 pixel in the Preiser. Well, what have we got? The first side is stylus. We wanted and the remaining Dave's Not so much. Let's adult lives inside the Cube spinner and then in the Pricer whole six size of the price of our one on top of the other. 4. Move the Cube Into 3D Space: let's now move each face of the cube to its proper place. Face one. We move 60 picks or closer to the viewer by transformed, Translate said. Positive 60 pixel face to We rotate by 90 degrees around the white access. I move it closer to the viewer by 60 pixel. We can't see it because it's 90 degrees to the X axis. Face. Three. Rotate 90 degrees around the Y axis, 90 degrees around the X axes on, move it, 60 picks or closer to the viewer, and we can't see that one either. Now it gets a little more interesting with face for rotate 1 80 degrees around the Y axis on 90 degrees around the Z axis, all moving its 60 picks or closer to the viewer. And still, we can't see much in the browser. I think only when we start spinning with me at the key frames anyway, carrying on with Face five. This time, we'll rotate it to 70 degrees around the Y axes on 90 degrees around the set axis on, move it 60 picks or closer to the viewer on there's no change in the browser and finally face six. We rotated to 70 degrees around the X axis and move it 60 picks or closer to the viewer in the browser, this time face six. It's moved to reveal the back side of face for interesting in the next lesson, let's make it move by adding the key frames. 5. Make the Magic Happen: So let's make the Cube rotate by using the up key frame starling in CSS three. And the idea is that the animation will gradually change from the current style to the new style at certain times in the animation cycle. To get in animation toe work, we must find the animation to an element, and we've done that by giving the Tiv with class cubes spinner on animation name of Spin Cube on referring to the animation name in the APP key frame styling. And remember, the animation duration is also set to 12 seconds in the Coop Spinner styling so have 0% of the duration that is at time. Zero. The transform rotate zero degrees in all three dimensions, and in the browser, the first face face one is towards the viewer. On 16% of the time, we rotate the cube around the Y axis by negative 90 degrees on the Cube returns to its initial state over the remaining 84% of the time. When we introduce another step of 33% the cube stays at negative 90 degrees around the Y axis, and we rotate the cube 90 degrees around the set axis on the Cube returns to its initial state over the remaining 67% of the time. When we introduce another step at 50% we rotate the cube negative 1 80 degrees around the Y axis on the cube stays at 90 degrees around the set axis on the Cube returns to its initial state over the remaining 50% of the time. When we introduce another step at 66% we rotate the cube too negative to 70 degrees around the waxes, and we rotate. The cube 90 degrees around the X axis on the Cube, returns to its initial state over the remaining 34% of the time. When we introduce another step at 83% we wrote, Take the Cube to 90 degrees around the X axis on The Cube returns to its initial state over the remaining 70% of the time. And there you have it. One spinning cube 6. Let the Dice Drop: Okay, So now let's add a little twist to the spinning dice by moving it from one position to another kind of like throwing the dice. So I have duplicated the HTML file coop test and call it COO test to dot html in the browser open coup test to paste him out. And it's the same as before, and the plan is to let it fall from the top left of the view Ports is somewhere near the bottom, right in a CML. Let's around the cube with another tiff called cute container in the present. No change in the CSS. Let's give active sometime mentions in the border heightened with 2 50 pixel on a one pixel gray solid border in the browser. It's there now. Let's move the Cuba little into the container. Div. Margin left on top 50 pixel in the President's moved. No want to position the cute top left, so let's just remove the display. After use in the browser, the dice moves top left. Next, we need to animate the container. Div. Give it a name of spin container. The timing function. Let it play. Just the one time in a duration of two seconds. And then let's also change the cube itself to play just one time with a two second timing. And let's remove the border. And then we make the magic by adding a key frame to the spin container, and we only need to tell it where to end. So at 100% of the time, the transformer attribute is to translate the position to 250 pixel right spent 450 pixel down. Let's see what happens, and the coup kind of falls from the top left to the bottom, right. You can try making it look more realistic by adding additional key frame rules to the spin container. Good luck.