This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Florian Pnn
Posted May 27 - Read on Facebook

Hi everyone,
I struggle to understand how the 3d rotation is working, especially that I don't get the same effect I would want to have.
If you open the inspector you can see the effect I want to have but it seems to not be how the layer reacts. Any idea how to fix it?

https://florianpnn-prototypes-framerjs.s3.amazonaws.com/mbrace-foldable-card/index.html

6 Comments

Koen Bok

Hey Florian, what do you mean by "open the inspector to see the effect that I want to have"? I can't really guess what you are trying to do here :-)

Florian Pnn

On the left you can see what I want (Safari) and in Chrome it's not working in the same way as you can see on the right : https://dl.dropboxusercontent.com/u/4822469/Capture%20d%E2%80%99%C3%A9cran%202014-05-26%20%C3%A0%2014.42.22.png

Koen Bok

Hmm they look the same here but I suspect you want to look into perspective origin: http://www.w3schools.com/cssref/css3_pr_perspective-origin.asp

Florian Pnn

Hmm, I tried on 3 different Chrome and we all see the same here.. (yeah I looked at it but I think it's more browser related as it doesn't display the same on two webkit based browsers)

Tisho Georgiev

Hey Florian, I think this is caused by Chrome failing to re-calculate the transforms based on the perspective after the whole page has been re-drawn by the iPhone template. So your original transforms end up looking as if the perspective had been applied to the whole browser window (which matched the size of Framer's root element at load time), and not just the 320x568 rectangle, which is actually what you want.

You can get around this pretty easily by wrapping your layers in another layer that has the width and height of the phone's screen and has perspective applied to it:

var phone = new Layer({ width: 320, height: 568 });
phone.style.webkitPerspective = 1000;

If you add your layers as sublayers to "phone", all of their transforms will take into account its perspective and size, and things will look as intended.

Florian Pnn

Tisho Thank you man!

Read the entire post on Facebook