I
I
Ivan Ivanov2018-03-13 18:39:06
css
Ivan Ivanov, 2018-03-13 18:39:06

How to make roulette in css?

Hello. How can you make a kind of roulette in the form of a circle that rotates? Explain to me how to animate this in css? I can do the server part myself. Only you need not to stupidly make a rotating picture, but also to transfer the value of the dropped number to the server, otherwise if I do it on JS, I can choose what I should get) Thank you in advance! Here is an example:
I saw similar ones on the Internet, but everything is in js and not very secure...
5aa7f076f084a420311321.png

Answer the question

In order to leave comments, you need to log in

4 answer(s)
D
Dmitry Bay, 2018-03-13
@kawabanga

Um, why don't you like the rotating circle?
Still elementary in this case, you have a circle - it's 360 degrees, twist and count the degrees.
For example, there are 20 elements in a roulette, which means 18 degrees are spent on one element.
Moreover, if the rotation mechanics is done on the server side, then the user will be able to easily cheat your roulette wheel.
Therefore, the algorithm of actions -
A person launches a roulette wheel, we send a request to the server and get the result. we calculate the rotation speed and where the roulette will end, display it to the person, and show additional information.

T
twobomb, 2018-03-13
@twobomb

I did it once, but not on CSS, but on canvas. Here
you can change a little and get this

A
Alexander Aksentiev, 2018-03-13
@Sanasol

How to make roulette in css?

make me unsee it.
No JS, no CSS all of a sudden! they are not responsible for what will fall on the roulette wheel or any other scam in the browser.

A
Andrew, 2018-03-13
@KeySVG

This is for SVG, not CSS.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question