Create simple 3D Poligon slideshows with CSS

Basically, after you are done, you will get something similar to this

HTML

First, you need to have html

CSS

Next is the CSS, I will go from the biggest tag to the inside gradually …

#slider

Everyone knows the background, I will talk a little bit about the ones below, even if you guys try it, you will know what it is.

• perspective: Create depth for the slider, that is, the further away the smaller it. Here, the smaller you adjust, the “farther away”. The “px” part can be removed for use only on chrome and firefox.
• perspective-origin: Create a “warping” level of the slideshow, it is only for it to face up or bend down If you want the slideshow to “look straight” then you can use the center or remove that line as well

#stage

Nothing more to say but translateZ(-200px) , it is used to fix a bit for the -webkit-perspective: 800px; In #slider because this guy zoomed in on an axis, the “after” image is smaller, and of course the “previous” image will get bigger, so we need to push this “axis” back to “later” for a bit. from “broken frame”

#shape

This is just a note for those who don’t know the animation, it runs the spin keyframes you define in 9 seconds, repeats endlessly, and the linear runs at a steady speed from start to finish, it also There is a faster or slower pattern, but here it is ignored.

The keyframes above are that it runs the sample page on top, if you want it to stop a bit at each slide, you can use the latter.

.plane

Since this is the last part to help you reduce the number of slides, but the “shape” is still standard, we need to set the position for the slides, the animation only helps it to cycle around.

And there is no way but folding hands, unless you use js, that part you learn yourself, or you can make another article using Js on a “certain day”

Now, “here, here is the code”.

The rotateY section is easy to understand, the thing to note is the translateZ part, it is not a random number, there is a formula for it, it must be beautiful to be standard.

The translateZ number is the distance from the “axis” to the slide, which will be calculated

Based on this formula, you can edit, add and remove slides freely without fear of breaking

Finish

That’s it, it’s nice to run the code now

Code full:

Good luck!!