The root argument refers to the DOM element that holds the carousel. Supposing, just for now, that the carousel had only one image to showcase, I can start with the sizing and the alignment. The element is the containing box for the first image and the reference element around which the other images are positioned and transformed. I’ll use $n to denote the number of images in the carousel and $item-width to specify the width of an image. In the following code snippets, some Sass variables are used to make the component more configurable. In this section I’ll show you the key CSS rules, which I’ll go through step by step. The d letter in the picture represents the value for the CSS perspective property. This way, the side that is currently facing the viewer will be on the screen plane at z = 0, and the front image, not being affected by the perspective foreshortening, will have its ordinary 2D size.
This imaginary reference polygon will be positioned in 3D space, perpendicular to the plane of the viewport and with its center pushed back into the screen at a distance equal to its apothem, the distance of a side of the polygon from its center, as illustrated in this top down view of the carousel: However, the relative code modifications would not be hard. For simplicity, these special cases aren’t handled and at least three images are assumed. Anyway, the case of only one image is rather useless two images are slightly more probable, and they could be placed on two diametrically opposed points on the circle. What if there are fewer than three images in the carousel? The polygon cannot be defined and the following procedure cannot be applied as it is. See the Pen Regular Polygons by SitePoint ( on CodePen. So, the number of sides of such a polygon is the same as the number of images in the carousel: with three images, the polygon is an equilateral triangle with four images it is a square with five a pentagon and so on: This circle can be approximated by its circumscribed regular polygon and the images placed on its sides: The elements should be arranged around the circle delineated by the carousel. Before looking into the CSS, let’s have an overview of the plan that will be developed in the following sections.
0 kommentar(er)
