3d animation

[nikostzounakos]

Hello!

I am trying to create this 3d animation on a div, that would spin non stop.

https://officenter.gr/newanimation/output.mp4

At first I was thinking that I should create the design and then use some animation with transform,
but I do not think this should work right?
I mean about the 3d feeling.

Should I use three.js maybe?
Or there is a more easy way?

[PaulOB]

@nikostzounakos

At first I was thinking that I should create the design and then use some animation with transform,
but I do not think this should work right?

For a basic animation you could rotate a flat image quite easily but it won’t look as good as that 3d demo as obviously you get extra detail as it rotates rather than a flat rotation. However for a simple object it may be good enough.

If you have plenty of time spare (months possibly) you could draw the whole thing in CSS and then you would be able to get a realistic rotation. See this pen (not mine) of a rotated iphone for example that is in pure CSS.

@nikostzounakos

Should I use three.js maybe?

I don’t know much about three.js but it doesn’t look that simple but seems to produce good effects,

@nikostzounakos

Or there is a more easy way?

I would be inclined to create 3 (or more) static images of the object (front, side and back (if different)) and then sequence between the different images with css to provide the illusion of rotation. In the end it depends on what level of detail you require.

[nikostzounakos]

@PaulOB

I would be inclined to create 3 (or more) static images of the object (front, side and back (if different)) and then sequence between the different images with css to provide the illusion of rotation. In the end it depends on what level of detail you require.

Ok I will try this. If I want more detail maybe I could add more than 3 images?

Do you have any good example tutorial on how I should start with it?

[PaulOB]

@nikostzounakos

Do you have any good example tutorial on how I should start with it?

Here’s a basic spin using 2 (stock) images to show the basic effect.

Obviously the back image should be the reverse of the front image to create the proper effect.

I’m thinking that perhaps you could add more planes for the side of the object but not really sure how that would work out. Probably something like this example.

Or it may be easier to simply change the background image in my example in certain steps in the keyframes.

Alternatively scrap all that and just swap between a number of already rotated images (assuming you have those available).

I’m just thinking out loud here so it may be a case of test and see what works best

[Archibald]

I suggest making it an animated GIF:

[WebSteve]

There are a variety of videos showing how to make a spinning logo.

https://www.google.com/search?client=firefox-b-1-d&q=make+spinning+logo

You’ll want to see which one fits in your comfort zone. We don’t know what your coding, graphics, or other experience is.

[nikostzounakos]

Ok thank you for your answers I will check everything.

Nice idea with the gif too.

It will need some other moving animation too with this “3d model”.
I will update you more specifically with some videos because it’s hard to explain.

[PaulOB]

If you are going to have lots of spinny things then I suggest you invest some time in implementing the prefers reduced motion media queries. Then you can swap out the code for static images if the user has specified that they don’t like spinny things

GIFS and prefers-reduced-motion | CSS-Tricks

prefers-reduced-motion - CSS: Cascading Style Sheets | MDN

[nikostzounakos]

Thank you very much!!

I will try it