Card Flip Animation and setting Perspective

[Loklz (Jay)]

Trying to use the 3D card flip interaction and it tells me I have to set either children or self perspective. I can’t find a tutorial that covers the very basics of this step.
If there is one, could someone please provide a link?
If not, could someone please give a quick overview?
Thanks!
Jay

[Revolution]

Reviewing this demo might give you some perspective… on perspective

card-flip - Webflow

Think of it this way…

You have a div element that has children defined inside it.

• The child elements can be any type of element… another div, an image, an input field… doesn’t matter.

If you want a child element to “do something” in the 3D world…

• you have to give it perspective. So it understands “where it is” in the 3D world.

You do this by going up (at least one level) to that elements “parent” (or “grand-parent etc”)…

• and assigning a “perspective value” to the parent / element.

Any child within the parent will inherit that elements perspective.

Like in the real world…

• a child knows “how to act” because "their parent gave them a “foundation” or a perspective - to work from.

If a div (grand parent) is assigned a perspective - and it contains a div (child (a) / parent) and that div has a child (b)… then (a) will inherit from the grand-parent and (b) will inherit from (a).

---

If you want to get really fancy and create really interesting effects…

You can also - change (a)'s perspective of a parent to be different than the grand-parent… so (a) responds to the grand-parent in one manner… and (b) responds to (a) in a different manner.

example:
div (perspective 1400)

• sub-div (perspective 1700)
  – sub-sub-div (perspective 1900)
  ---- image

---

“Child(ren) Perspective” is found in the Style Tab under Transitions and Transformations.

Best way to understand it… is just to enter a value and see where it goes.

But in general… I use values between 1400 and 1700. You might find a different perspective more to your liking.

Someones perspective on something can be somewhat… subjective.

[Loklz (Jay)]

Thank you Revolution, very much appreciated!!
-Jay