Published in

The Startup

# The general idea of what we’re going to do is this:

We’re going to place an HTML DIV in the center of the screen.
We’ll place some cards in the DIV, then fan them out in a circle.
When we rotate that center DIV, all of the cards will rotate in a circle.

# Let’s begin.

We’ll start by creating that center wheel and placing some cards on the wheel; we won’t center the cards in the wheel…that will come later.

## Now comes the hard stuff.

How are we going to re-position the cards to display around our wheel? A bit of Trigonometry.

We’re going use the sine and cosine functions to calculate the x and y positions of each card.

We do this by taking the angle — we’ll move in 45 degree increments — of where the card is supposed to be.

Using sine to calculate the y coordinate.
Using cosine to calculate the x coordinate.

Finally, to get this thing moving, we’ll just attach a ‘wheel’ event listener to our document and increase our ‘theta’(angle) variable by the input of ‘event.wheelDeltaY’…

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

--

--

--

## More from The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

## An Object Is A

Learning to code…