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

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Aug 01 - Read on Facebook

3D Rotation with Z Axis Depth

Source: http://jrdn.io/c7SG

Here's an example of how to setup your layers to get depth on your Z Axis when rotating on your Y Axis.

I was having some trouble getting this to work in a project so I stepped out and started a simple example to try to find the proper way to set this up. It appears as though you need to enable the preserve-3d transform style and make sure that layer does not clip for z-axis depth transforms to work properly.

I worked out the solution and figured I'd share with you all. :D

14 Comments

Callil Capuozzo

I have struggled with this before. Excited to look into your code!

Jordan Robert Dobson

I struggled most of the day... I feel your pain Callil.

Akhil Dakinedi

whoa! niice.

Rich Zarick

Jordan, you got this stuff on lockdown. Definitely using this in the future - awesome work!

Jordan Robert Dobson

I'm glad you guys can use it!!! I definitely can. It was a bit of work to figure out but... now we have it.

Jordan Robert Dobson

I'm just curious why we don't get this in framer already CC/ Koen. It would be nice to have a preserve-3d that handles the clipping for you. Is there really an instance where you don't want it? Or is it a performance thing?

Koen Bok

Yes preserve 3d had weird rendering/performance issues. But maybe I can enable it automagically or make the api more clear. Anyway, this is a great example, thanks so much!

Jordan Robert Dobson

Sure thing Koen... I've done this a few times before in HTML & CSS but had trouble finding the right combo inside of framer and finding what presets were throwing things off. I initially was having issues with backface visibility and realized it wouldn't adhere to those settings correctly unless the preserve-3d was set.

Fran Pérez

There's also the issue with Z. It's interesting that you need preserve-3d to enable it in Framer. With plain CSS it just works without any extra code.

Jordan Robert Dobson

Fran Pérez - what's the issue with Z? Like, not going behind the backing superLayer?

Actually flat is the initial setting... I think it's just the clip part that threw me off... As soon as I started looping the animation then starting throwing properties around I got lucky on the clip setting.

Fran Pérez

The issue is that when you only set Z, it does nothing, and it should.

http://codepen.io/mrrocks/pen/EjmvYE

Jordan Robert Dobson

Fran - you have a framer example?

Read the entire post on Facebook