Rotation on the Y axis possible?

Using JavaScript with Hype
1

I was able to make this work:
hypeDocument.setElementProperty(flipme, ‘rotateZ’, 0, 1.0, ‘easeinout’);

what I really want to happen would be this:
hypeDocument.setElementProperty(flipme, ‘rotateY’, 0, 1.0, ‘easeinout’);

is there any method or trick to make that happen? with Javascript, I need to avoid using the timelines if I can on this one. I included a little example that shows the goal.

thanks in advance!

2

rotation_tests.hype.zip (22.6 KB)

3

https://forums.tumult.com/t/what-is-going-on-with-a-lack-of-hype-updates/15232/13?u=h_classen

4

Unfortunately there’s not a method through the JavaScript API to control 3D rotation.

I’ve added a “+1” for this on our tracker.

Hype likes to take control of the CSS transform property which includes the 3D rotations. While I would advise against hacking it, you might have some success if in the Document Inspector you check “Position with CSS left/top,” uncheck “Use WebKit graphics acceleration”, and then you could try modifying the .style.transform property itself to have a rotateY.

var boxElement = hypeDocument.getElementById("mybox");
boxElement.style.transition = "transform 1s ease-in-out";
boxElement.style.transform = "rotateY(90deg)";

But depending on your needs there’s probably still cases where Hype might fight you over the transform property.