So the basic idea is 1 - 9 seats at a curved table as though you are looking at them through first person view. I'm trying to get div
elements which would be seats to flow on the outside of another div
element that has a border radius to make it a semi oblong circle. I've found a few examples with an element being animated to flow across the container in an arc, but I will need the div/seats to be static. I am looking for any ideas or examples that can lead me in the right path.
相关问题
- Adding a timeout to a render function in ReactJS
-
Why does the box-shadow property not apply to a
- Add animation to jQuery function Interval
- jQuery hover to slide?
- Issue with star rating css
Finding points on ellipse and translating:
If your oblong circle resembles an ellipse then you can find points on the ellipse using mathematical formula and then translate each
div
element to that particular point.Mathematical formula for calculating point
(x,y)
on an ellipse is(a * cos(t), b * sin(t))
. In this formula,a
represents the radius of the ellipse in x-axis,b
represents the radius of the ellipse in the y-axis andt
represents the angle in radians. Angle in radians = Angle in degrees * pi / 180.To make use of this approach, we do the following:
div
elements absolutely at the centre point of the ellipse.(x,y)
corresponding to each angle and translate thediv
to its place by usingtransform: translateX(...) translateY(...)
. The angles are in steps of 22.5 deg because there are a total 9 elements to be placed within 180 degrees.Note: The coordinates are approximate values and hence they may not align 100% correctly.
Using rotation and scale transform: (original idea)
The below snippet provides a very rough idea on how to position the elements along a circle. It is by no means a complete output but you can adapt it to fit your needs.
The components are very simple:
div
elements for each seat. All of them have 50%width
of the container and 50%height
.:after
) attached to the childdiv
elements that produce the circle/dot like seats and they are absolutely positioned at the bottom of the container.div
element is rotated by180/(n-1)
deg as we need them to be positioned around a semicircle.There is a simple method to convert the above into an oblong circle and that would be to scale the container in the X-axis. One point to note is that the children would also get scaled and hence would need to be reverse transformed.
The first method is the perfect and recommended approach as it doesn't cause any distortion to the
div
elements. The second is rough idea which avoids complex trigonometric calculations.