An example of rotating a 3D image while scrolling. How is image rotation implemented and what technology is used?

Question

css

Hello (my first question on Habr).

There is a promo site https://www.mercurymarine.com/en/us/v12/ . When scrolling the page down (scroll), three-dimensional images appear with their subsequent rotation.

I don't understand how these 3D images are implemented. It doesn’t look like a full-fledged three-dimensional model, it seems like a gif too.
I ask you to give a direction for a solution, an explanation, an example, a thought or something else.

Thanks in advance ;)

-------------------------------
It turns out that all these 3D images are a set flat pictures (JPG).
Do I understand correctly: depending on the location on the page, an image appears with movement along the Y axis?
Do not take it for impudence, but if there are simple examples, I will be glad to read it.

Answer 1

The option with pictures is called sequence animation. There are many examples on codepen. For example here

Answer 2

All these features are a set of video clips. You need to be crazy to do all this through pictures))
Here are a couple of videos from your example:
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/ static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...
https://www.mercurymarine.com/static/img/stingray/...
The essence is quite simple , you can set the frame time for a video clip, i.e. rewind (here I am the captain). From which, thanks to the html5 video api
, we can programmatically indicate the time, i.e. rewind the video programmatically. Currently, rewind is based on the position of the scrollbar.

Answer 3

You can have pictures, you can have three.js, look at the examples on their website