Use Children perspective and 2D & 3D transforms to give your elements a 3D look.
Modifying solely 2D and 3D changes on components can give them an isometric or flat appearance. To activate genuine 3D perspective, you’ll have to turn on Offspring perspective on a superior element. This changes the superior element’s functionality resembling a “camera” that exhibits various views of the child components and establishes perspective.
To incorporate Offspring perspective on a superior element:
Pick the superior element (for instance, a Segment)
Unfold the Style panel > Effects
Tap the 3 disclosure dots to the right of 2D & 3D transformations
Set the Offspring perspective’s range (e.g., 1000 pixels)
To implement 2D and 3D transformations on a child element:
Pick the child element (for instance, a Section block)
Unfold Style panel > Effects
Tap the “plus” symbol to the right of 2D & 3D transformations segment
Opt for Kind > Rotate
Utilize the sliders to modify the X and Y axes (e.g., fix X to -17 degrees and Y to 23 degrees)
Remark: To integrate 2D and 3D transformations to numerous child elements at once, append the identical class to each child element. Gain more knowledge about Classes.
Presently, you can revisit the superior element and adapt the Offspring perspective range to give the child elements a flatter or more 3D appearance. Gain more knowledge about utilizing 3D transformations.
Incredible! It’s a completely different dimension of impressive!
Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.