← All elements
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>About this animation
A line-drawn Ferris wheel that turns slowly while every cabin counter-rotates to stay upright and shifts colour as it goes.
How it works
A circle with six lines for spokes turns for ten seconds per revolution. Each cabin is placed on the rim and runs the opposite rotation so it hangs upright, with a colour change at the quarter marks. The lines use transform-origin at their start so they rotate around the hub.
Ways to customise it
- Change the 10s wheel duration.
- Edit the cabin colours in the keyframes.
- Resize the wheel through its vw based width and height.
Good to know
It is decorative. The percentage sizes are tied to the viewport, so check it inside a small frame before reusing it.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.