Revolving 3-D Shotcut Logo

I had a couple of hours to spare so I decided to create a 3D-animation of the Shotcut logo. I wrote and tested the HTML/CSS code in just over an hour. I fed it as a browser source into OBS studio and had a video produced in less than 5 minutes. I then spent a couple of minutes tidying it up in Shotcut.

If anyone wants a more detailed description, including the code see my webpage at:

https://elusien.co.uk/shotcut/resources/index.html#section_5

9 Likes

This is nice !
I should get up to date on HTML/ CSS.
I see the cool stuff you post regularly on the forum but I didn’t imagine 3D animation like this was possible with only a few lines of styles and an even shorter list of HTML lines.
Are you sure there’s no java script of flash stuff hidden somewhere? :face_with_monocle:
:smiley:

Genius!

Looks amazing!

Nope, none whatsoever. The 3D elements of CSS have been out for quite a few years, unfortunately the WebVfx system in the old versions of Shotcut did not (fully) support this, so it had to be done in a browser or OBS.

The animation part is done by Keyframes, which were available in WebVfx.

3 Likes

Hi @elusien, this passed me by for a few days. Brilliant. I’m using your sample code to dissect how you did it. It’s a masterclass! I’m just about hanging in there in understanding it. Meticulously formatted, too.

This topic was automatically closed after 90 days. New replies are no longer allowed.