Whadda ya think, guys? Wouldn’t that be awesome?
Thanks for the request.
For now, the way to adjust the Z axis center point, hold ⌘, and click and drag the rotation point which appears:
Actually, what do the “Transform Origin” values do? Played around with it, it’s not having any effect on my animation (a simple move right). I searched for it in the online documentation but it’s not mentioned…
This is covered in the Rotation section of the docs. The origin value sets the center point of rotation for transformations on the Z axis. Here’s a demo: http://www.w3schools.com/cssref/trycss3_transform-origin_inuse.htm
And here’s approximately what the code looks like that we set:
div {
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
1 Like
I hope it will be possible in the future to animate also this property! 
In my website I need to use the same symbol (planet) but with different orbits, and the only way to do it is to force the origin to change by CSS and !important. 
Trying to simply animate a door opening. I have tried to change the Z axis and it does rotate image around that point but, can’t ‘open’ the door from the left to right? Any ideas?
Hi Lane!
Is this what You are after?
Demo here.
Hype Project: DoorSwing.zip (56.2 KB)
If so please note that there is no 3D effect in Hype so the door as it swings shows no thickness.
Settings in “Metrics Inspector” with the “Door Swing” group open:
Transform Origin: “X” offset is 100% - i.e. at the far right side of the group.
When the door is closed the “Y” angle rotation is “0”.
Thanks thats exactly what I was looking for!!! Now to try and make the handle look good
1 Like