Coding a 3D Cube in pure CSS !

#css #animation #perspective #3d

Heyfellow creators !

It's timeto have fun with theperspective in CSS.

If you prefer to watch the videoversion it's right here :

1. The HTML structure.

When you use perspective in CSS, you need a container to set theperspective depth, and a child or children to playwith the 3D environment.

<divclass="container"><divclass="cube"><divclass="face front"></div><divclass="face back"></div><divclass="face right"></div><divclass="face left"></div><divclass="face top"></div><divclass="face bottom"></div></div></div>

2. Perspective set up.

Create the deepness of the perspective.
Perspective will add depth between the screen and the scene.

.container{width:200px;height:200px;perspective:1000px;margin:100pxauto0;}

Use it with the child.

.cube{transform-style:preserve-3d;width:100%;height:100%;position:relative;}

Style the faces, the bg-image is just to have a stylish background.

.face{position:absolute;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,rgba(70,70,70,0.2)0px,rgba(70,70,70,0.2)1px,transparent1px,transparent21px),repeating-linear-gradient(90deg,rgba(70,70,70,0.2)0px,rgba(70,70,70,0.2)1px,transparent1px,transparent21px),linear-gradient(90deg,rgb(255,255,255),rgb(255,255,255));}

3 Translate and rotate the faces.

The translateZ will bring the elements closer to the screen.
It's used to create the cube dimensions. (100px).
The rotation are on X and Y, to place the elements on the edges of the cube.

.top{transform:rotateX(90deg)translateZ(100px);}.bottom{transform:rotateX(-90deg)translateZ(100px);}.right{transform:rotateY(90deg)translateZ(100px);}.left{transform:rotateY(-90deg)translateZ(100px);}.front{transform:rotateX(0deg)translateZ(100px);}.back{transform:rotateX(-180deg)translateZ(100px);}

4. 360° flip time !

Create and link the animation.

@keyframesspin{from{transform:rotateX(0deg)rotateY(0deg);}to{transform:rotateX(360deg)rotateY(360deg);}}.cube{transform-style:preserve-3d;width:100%;height:100%;position:relative;animation:spin5sinfinitelinear;}