Transform: rotate3D for SVG path?

Is this possible in Hype? Sorry about the short Topic.

Not sure what you have in mind but faking it with rotation gizmos in X, Y, Z could be an idea again depending what it is you want to accomplish.

Hype already uses rotateX, rotateY and rotateZ. So, yes you can use the 3D context (rotate3D is just a combined call to these properties). The problem lies elsewhere: Hype has this particular setup that every layer has a "wrapper" (HYPE_element_cointainer). This forces each element on stage into its own stacking order and hence you don't get the combined 3D transformations you would expect when transforming a "group". Spoiler: the clipping breaks and the group flattens.

Ja, we are going with a 2D twist to simulate something 3D. Still needs work but it will sell.
These are Paths moving on the X and Morphing. More shapes will come to make belief.

1 Like

Nice try, I hope the time it took was worthwhile.

5 min. :slight_smile: Really.


Max thats awesome and looking at the .js its very lite weight minified at 3.6kb Hopefully tumult one day can include this to be part of Hype one day so we can add fonts like that have shapes and animate and rotate which ever way we choose. And yes, I read how it works, but how exactly would it work if say you have a cube with no background and border width on 1 pixel as a font?



This doesn't animate cubes in a traditional sense. It creates multiple copies of the front most object. They don't get constantly recreated … so it should not work with the Hype vector tool but it probably works with static SVG added to the innerHTML.

The code could be tweaked to support 3D transformation of manually layered elements in innerHTML in my opinion … I just updated the download with some code cleanup and nicer example. Just a quick port… feel free to make something with it. I will probably touch it again when a project or client requests it.

Cool, would love to see what you've done Hype with for clients, Im sure others might agree with me seeing as how you been super active with regard to extending hype and sharing your hype extensions with the community.

This 3D effect is really impressive, both for the final visualization and for the simple logic it applies.

At the end I'm going to encourage myself to learn how to program Js :sweat_smile:

1 Like