How to make a animated cube... And don't die triying.

main.png


Hello everyone, this is my first try posting something here so lets do it.

I'm going to explain the animation that i liked most made it only in HTML and CSS, this kind of work can be find it in web but this is my way to learn it.




Art Cube

First steps

First we have to make the HTML some divs will do the job. Will be working directly on the body so add first a container for the cube and one div for every face in this case 6.

html-example.png

Now CSS

Lets stablish the css parameters to make something simple and see what is happening.

css-example.png

Lets see what is this, first we already stablish that we are giving some perspective to the body,
give every box a height and a width, also give a background to every face of the cube to see the diference.

This is how it looks in the page.

cube-before.png

Ok... I wasn't expecting that... Let's add more parameters...

Whit this to blocks of code we are saying where is going to be placed the cube.

css-example-2.png

Now lets make it dance

css-example-3.png

How it looks?

cube-after.png

Perfect, next step is to add some image, in my case i have then in my goggle drive.

css-example-4.png


Full animation

carbon.gif


Thank you for reading all my first post, hope you like and can be usefull.


Follow me if you liked, if you don't follow me anyway XD

GITHUB|LINKEDIN | TWITTER

“Do. Or do not. There is no try.” Master Yoda, The Empire Strikes Back.
H2
H3
H4
3 columns
2 columns
1 column
2 Comments