Hey fellow creators !
It's time to have fun with the perspective in CSS.
If you prefer to watch the video version it's right here :
1. The HTML structure.
When you use perspective in CSS, you need a container to set the perspective depth, and a child or children to play with the 3D environment.
<div class="container">
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="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: 100px auto 0;
}
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,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),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.
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube {
transform-style: preserve-3d;
width: 100%;
height: 100%;
position: relative;
animation: spin 5s infinite linear;
}
Bravissimo ! It's done 🥖🍷
Source code, with all the shiny CSS is right here :
https://github.com/Ziratsu/Cube-3D
Come and take a look at my brand new Youtube channel :
https://www.youtube.com/c/TheWebSchool
Be part the first pioneers that follow me uh ? ⛰️
See you next time for some quick and sweet tutorials !
Enzo.
Top comments (0)