Intro
This is a FREE Remix file by Xperian to help you get upto speed on picking up the basics and using 3D Transforms in Framer, a new feature that enables richer, more dynamic and interactive content presentation.
Scroll to Explore ↓
Get Remix link at the end of the page.
Intro
This is a FREE Remix file by Xperian to help you get upto speed on picking up the basics and using 3D Transforms in Framer, a new feature that enables richer, more dynamic and interactive content presentation.
Scroll to Explore ↓
Get Remix link at the end of the page.
Intro
This is a FREE Remix file by Xperian to help you get upto speed on picking up the basics and using 3D Transforms in Framer, a new feature that enables richer, more dynamic and interactive content presentation.
Scroll to Explore ↓
Get Remix link at the end of the page.
Perpective 3D Card
Here's a simplest way to start making elements 3 dimensional. This perspective card is made with 1 layer and only 2 transform properties — 3D Rotate and Perspective.
While Rotation orients the card, Perspective property is what gives the object a 3 dimensional look. The lower the value, the stronger the perspective.
Select the card on the left and try tweaking the properties mentioned below on the right side properties panel under Transform section.
Here's a simplest way to start making elements 3 dimensional. This perspective card is made with 1 layer and only 2 transform properties — 3D Rotate and Perspective.
While Rotation orients the card, Perspective property is what gives the object a 3 dimensional look. The lower the value, the stronger the perspective.
Select the card on the left and try tweaking the properties mentioned below on the right side properties panel under Transform section.
3D Transforms
Rotate
Perspective
Rotating 3D Card
This card is made with 1 layer and only 1 transform property — Perspective. Then a Loop effect with 3D rotation makes it rotate instead of a static 3D card like shown above. Check it out!
3D Transform
Perspective
Effect
Loop › Rotate
Rotating 3D Card
This card is made with 1 layer and only 1 transform property — Perspective. Then a Loop effect with 3D rotation makes it rotate instead of a static 3D card like shown above. Check it out!
3D Transform
Perspective
Effect
Loop › Rotate
Rotating 3D Card
This card is made with 1 layer and only 1 transform property — Perspective. Then a Loop effect with 3D rotation makes it rotate instead of a static 3D card like shown above. Check it out!
3D Transform
Perspective
Effect
Loop › Rotate
Rotating 3D Card
This card is made with 1 layer and only 1 transform property — Perspective. Then a Loop effect with 3D rotation makes it rotate instead of a static 3D card like shown above. Check it out!
3D Transform
Perspective
Effect
Loop › Rotate
01
1 Face Layered 3D Card
Things get more interesting when more elements are added to the Card Frame with few other 3D Transform properties added — "Preserve" and "Depth".
Preserve ensures the elements inside follow the same 3D perspective as the parent Frame, while Depth helps position the objects forward or backward in 3D space (similar to Z index but inside a 3D Frame).
The result is the number appearing elevated off the surface of the card. Check out the properties.
3D Transforms
Rotate
Perspective
Preserve
Effect
Loop › Rotate
01
1 Face Layered 3D Card
Things get more interesting when more elements are added to the Card Frame with few other 3D Transform properties added — "Preserve" and "Depth".
Preserve ensures the elements inside follow the same 3D perspective as the parent Frame, while Depth helps position the objects forward or backward in 3D space (similar to Z index but inside a 3D Frame).
The result is the number appearing elevated off the surface of the card. Check out the properties.
3D Transforms
Rotate
Perspective
Preserve
Effect
Loop › Rotate
01
1 Face Layered 3D Card
Things get more interesting when more elements are added to the Card Frame with few other 3D Transform properties added — "Preserve" and "Depth".
Preserve ensures the elements inside follow the same 3D perspective as the parent Frame, while Depth helps position the objects forward or backward in 3D space (similar to Z index but inside a 3D Frame).
The result is the number appearing elevated off the surface of the card. Check out the properties.
3D Transforms
Rotate
Perspective
Preserve
Effect
Loop › Rotate
01
1 Face Layered 3D Card
Things get more interesting when more elements are added to the Card Frame with few other 3D Transform properties added — "Preserve" and "Depth".
Preserve ensures the elements inside follow the same 3D perspective as the parent Frame, while Depth helps position the objects forward or backward in 3D space (similar to Z index but inside a 3D Frame).
The result is the number appearing elevated off the surface of the card. Check out the properties.
3D Transforms
Rotate
Perspective
Preserve
Effect
Loop › Rotate
1 Face Layered 3D Card – Interactive
Making things interactive helps viewers connect with content deeper. This single faced layered card is a component made with 1 image layer as frame, 1 text layer added inside just like the previous card, but with 2 more added interaction layers.
The result is card slightly rotating in 3d only when you hover on left or right side. Check it out and check out the component interactions.
3D Transforms
Rotate
Perspective
Preserve
Interaction
1 Component, 3 Variants: Hover
01
1 Face Layered 3D Card – Interactive
Making things interactive helps viewers connect with content deeper. This single faced layered card is a component made with 1 image layer as frame, 1 text layer added inside just like the previous card, but with 2 more added interaction layers.
The result is card slightly rotating in 3d only when you hover on left or right side. Check it out and check out the component interactions.
3D Transforms
Rotate
Perspective
Preserve
Interaction
1 Component, 3 Variants: Hover
01
1 Face Layered 3D Card – Interactive
Making things interactive helps viewers connect with content deeper. This single faced layered card is a component made with 1 image layer as frame, 1 text layer added inside just like the previous card, but with 2 more added interaction layers.
The result is card slightly rotating in 3d only when you hover on left or right side. Check it out and check out the component interactions.
3D Transforms
Rotate
Perspective
Preserve
Interaction
1 Component, 3 Variants: Hover
01
1 Face Layered 3D Card – Interactive
Making things interactive helps viewers connect with content deeper. This single faced layered card is a component made with 1 image layer as frame, 1 text layer added inside just like the previous card, but with 2 more added interaction layers.
The result is card slightly rotating in 3d only when you hover on left or right side. Check it out and check out the component interactions.
3D Transforms
Rotate
Perspective
Preserve
Interaction
1 Component, 3 Variants: Hover
01
02
01
2 Face Layered 3D Card
This dual faced card is made with 4 layers contained in one Frame. Then the Frame is rotated with Loop effect. It is a simple, faster way to add multiple sides and layering elements in 3D space at the same time.
The only trick here is to ensure the back side elements (in this case number 02) have default Y rotation set to 180° to make them appropriately oriented on the back side. Check it out!
3D Transforms
Rotate
Preserve
Perspective
Depth
Backface
Position
Absolute
Effect
Loop › Rotate
02
01
2 Face Layered 3D Card
This dual faced card is made with 4 layers contained in one Frame. Then the Frame is rotated with Loop effect. It is a simple, faster way to add multiple sides and layering elements in 3D space at the same time.
The only trick here is to ensure the back side elements (in this case number 02) have default Y rotation set to 180° to make them appropriately oriented on the back side. Check it out!
3D Transforms
Rotate
Preserve
Perspective
Depth
Backface
Position
Absolute
Effect
Loop › Rotate
02
01
2 Face Layered 3D Card
This dual faced card is made with 4 layers contained in one Frame. Then the Frame is rotated with Loop effect. It is a simple, faster way to add multiple sides and layering elements in 3D space at the same time.
The only trick here is to ensure the back side elements (in this case number 02) have default Y rotation set to 180° to make them appropriately oriented on the back side. Check it out!
3D Transforms
Rotate
Preserve
Perspective
Depth
Backface
Position
Absolute
Effect
Loop › Rotate
02
01
2 Face Layered 3D Card
This dual faced card is made with 4 layers contained in one Frame. Then the Frame is rotated with Loop effect. It is a simple, faster way to add multiple sides and layering elements in 3D space at the same time.
The only trick here is to ensure the back side elements (in this case number 02) have default Y rotation set to 180° to make them appropriately oriented on the back side. Check it out!
3D Transforms
Rotate
Preserve
Perspective
Depth
Backface
Position
Absolute
Effect
Loop › Rotate
Interactive Book
This book cover is a component made with 3 frames in one, with Origin transform added newly apart from the Rotate, Preserve, Perspective & Depth.
The Origin transform helps set the anchor or edge from whoich the rotation must happen. Check out the interaction, the component and the properties.
3D Transforms
Rotate
Preserve
Perspective
Depth
Origin
Position
Absolute
Interaction
1 Component, 3 Variants: Hover & Click
"Both intuition and logic are essential to making better decisions."
— Daniel Kahneman
"A single experience may not tell you much, but a lot of brief experiences can quietly and subtly improve your ability to assess and predict."
— Daniel Kahneman
Interactive Book
This book cover is a component made with 3 frames in one, with Origin transform added newly apart from the Rotate, Preserve, Perspective & Depth.
The Origin transform helps set the anchor or edge from whoich the rotation must happen. Check out the interaction, the component and the properties.
3D Transforms
Rotate
Preserve
Perspective
Depth
Origin
Position
Absolute
Interaction
1 Component, 3 Variants: Hover & Click
"Both intuition and logic are essential to making better decisions."
— Daniel Kahneman
"A single experience may not tell you much, but a lot of brief experiences can quietly and subtly improve your ability to assess and predict."
— Daniel Kahneman
Interactive Book
This book cover is a component made with 3 frames in one, with Origin transform added newly apart from the Rotate, Preserve, Perspective & Depth.
The Origin transform helps set the anchor or edge from whoich the rotation must happen. Check out the interaction, the component and the properties.
3D Transforms
Rotate
Preserve
Perspective
Depth
Origin
Position
Absolute
Interaction
1 Component, 3 Variants: Hover & Click
"Both intuition and logic are essential to making better decisions."
— Daniel Kahneman
"A single experience may not tell you much, but a lot of brief experiences can quietly and subtly improve your ability to assess and predict."
— Daniel Kahneman
Interactive Book
This book cover is a component made with 3 frames in one, with Origin transform added newly apart from the Rotate, Preserve, Perspective & Depth.
The Origin transform helps set the anchor or edge from whoich the rotation must happen. Check out the interaction, the component and the properties.
3D Transforms
Rotate
Preserve
Perspective
Depth
Origin
Position
Absolute
Interaction
1 Component, 3 Variants: Hover & Click
"Both intuition and logic are essential to making better decisions."
— Daniel Kahneman
"A single experience may not tell you much, but a lot of brief experiences can quietly and subtly improve your ability to assess and predict."
— Daniel Kahneman
06
05
02
04
03
01
Rotating Cube
Why stop with 2 sides when you can make more? This cube is a single Frame with 7 layers — 6 sides and 1 secret layer. Then the Frame is rotated with Loop Effect. Check out the animation and properties to discover the secret layer inside the cube.
3D Transforms
Rotate
Perspective
Preserve
Depth
Effect
Loop › Rotate
06
05
02
04
03
01
Rotating Cube
Why stop with 2 sides when you can make more? This cube is a single Frame with 7 layers — 6 sides and 1 secret layer. Then the Frame is rotated with Loop Effect. Check out the animation and properties to discover the secret layer inside the cube.
3D Transforms
Rotate
Perspective
Preserve
Depth
Effect
Loop › Rotate
06
05
02
04
03
01
Rotating Cube
Why stop with 2 sides when you can make more? This cube is a single Frame with 7 layers — 6 sides and 1 secret layer. Then the Frame is rotated with Loop Effect. Check out the animation and properties to discover the secret layer inside the cube.
3D Transforms
Rotate
Perspective
Preserve
Depth
Effect
Loop › Rotate
06
05
02
04
03
01
Rotating Cube
Why stop with 2 sides when you can make more? This cube is a single Frame with 7 layers — 6 sides and 1 secret layer. Then the Frame is rotated with Loop Effect. Check out the animation and properties to discover the secret layer inside the cube.
3D Transforms
Rotate
Perspective
Preserve
Depth
Effect
Loop › Rotate
Isometric Skew
Perspectives can be many but if you want to lock the perspective or transform a layer in a more specific perspective, then Skew is the way to go. Here the isometric cards are made with two 3D Transforms — one using Skew property and the other Rotate. And then animated with Loop Effect on Position.
While Skew sets a isometric perspective, Rotate helps in orienting the direction. Skewed layers also benefit from Absolute positioning to place them closer to each other and make them appear stacked.
3D Transforms
Rotate
Skew
Position
Absolute
Effect
Loop › Move
Isometric Skew
Perspectives can be many but if you want to lock the perspective or transform a layer in a more specific perspective, then Skew is the way to go. Here the isometric cards are made with two 3D Transforms — one using Skew property and the other Rotate. And then animated with Loop Effect on Position.
While Skew sets a isometric perspective, Rotate helps in orienting the direction. Skewed layers also benefit from Absolute positioning to place them closer to each other and make them appear stacked.
3D Transforms
Rotate
Skew
Position
Absolute
Effect
Loop › Move
Isometric Skew
Perspectives can be many but if you want to lock the perspective or transform a layer in a more specific perspective, then Skew is the way to go. Here the isometric cards are made with two 3D Transforms — one using Skew property and the other Rotate. And then animated with Loop Effect on Position.
While Skew sets a isometric perspective, Rotate helps in orienting the direction. Skewed layers also benefit from Absolute positioning to place them closer to each other and make them appear stacked.
3D Transforms
Rotate
Skew
Position
Absolute
Effect
Loop › Move
Isometric Skew
Perspectives can be many but if you want to lock the perspective or transform a layer in a more specific perspective, then Skew is the way to go. Here the isometric cards are made with two 3D Transforms — one using Skew property and the other Rotate. And then animated with Loop Effect on Position.
While Skew sets a isometric perspective, Rotate helps in orienting the direction. Skewed layers also benefit from Absolute positioning to place them closer to each other and make them appear stacked.
3D Transforms
Rotate
Skew
Position
Absolute
Effect
Loop › Move
Get Remix File
There's more to add to this space. For now, check out this file and use the resource for FREE.
Reach out or tag @arjunphlox or @teamxperian for any assistance or appreciation.
For learning Framer professionally in short and systematic ways, check out our Weekend Framer Workshop.
Get Remix File
There's more to add to this space. For now, check out this file and use the resource for FREE.
Reach out or tag @arjunphlox or @teamxperian for any assistance or appreciation.
For learning Framer professionally in short and systematic ways, check out our Weekend Framer Workshop.
Get Remix File
There's more to add to this space. For now, check out this file and use the resource for FREE.
Reach out or tag @arjunphlox or @teamxperian for any assistance or appreciation.
For learning Framer professionally in short and systematic ways, check out our Weekend Framer Workshop.
Get Remix File
There's more to add to this space. For now, check out this file and use the resource for FREE.
Reach out or tag @arjunphlox or @teamxperian for any assistance or appreciation.
For learning Framer professionally in short and systematic ways, check out our Weekend Framer Workshop.
