Discover the best perspective websites created by professional designers. Get inspired and start planning your perfect perspective web design today!

JP Dionisio

This is a cool project that I found in Code Pen.
I tried to do it in Webflow and learned along the way.
Looks best in Safari

Inspired by a pen of Simon Goellner.
You can find it here: https://codepen.io/simeydotme/pen/PrQKgo

And was able to create the blend modes through Vincent's work.
You can find it here: https://webflow.com/website/My-Webflow-Sandbox

Feel free to clone this.
Enjoy! :)

Pokemon Card Holo Effect

Jonas Arleth

In this Webflow tutorial I will show you how to create a scroll animation with a 3D perspective. With a few tricks you can even make 2D objects look like 3D and bring a wow effect into your website.‍ To make the whole thing scale smaller easily, I use the Fluid Design System on the desktop breakpoint (see custom-CSS embed element).

Watch the tutorial here: https://youtu.be/NNGW2IlfNxA

3D Scroll Animation in Webflow

Alex Hartan

Experimenting with different kind of animations in Webflow. Feel free to clone it, share it, use it, edit it, and if you liked this, please hit Like!

go-farther

Kevin Haag

Here's MicroMonday #9: kinda video-gamey, use your arrow keys or your mouse to navigate.

--

⬛️ ⬛️ ⬛️ ⬛️ 🔲 🔲
Native Interactions

⬛️ ⬛️ 🔲 🔲 🔲 🔲
Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

MM—009: Keyboard Menu

Master Flowmaker

Recreation of scroll behaviour in https://www.andreasantonsson.dev.

Inclined scroll and perspective effect done natively in @webflow.

Smooth scroll using Len's from @studiofreight.
Staggered chars using a small custom function.

Requested by @socoloffalex

Portfolio landing

Francesco Castronuovo

Hi my gorgeous friends of Webflow,

By playing with Webflow interactions and animations, 3D transforms, and a bit of Math, you can create a round text effect with absolutely no code.

Scroll till the end of the page to reveal one last scroll-into-view interaction effect! :)

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

No Code Round Text Effect

Redesign concept for the Netflix sign-up page.

As much as I love the Netflix website, the sign-up flow can use a little design love. After all, that's their main way of converting new customers.

This is how I imagined the new look of the sign-up page.

Feel free to clone and share this with a friend.
If you enjoyed it, please leave a like and a comment. ✌️

Netflix Sign Up

Can you build a realistic iPad mockup in Webflow?

That's was my initial question, and it lead me on an interesting path...

A few days later, I am pretty happy with the result, and I'll be using this to present my designs to future clients.

If you like it, feel free to clone this template and leave a like while you're here 😁

interactive-ipad

While experimenting with 3D perspective, I found an unique way to expand the hamburger menu.

This is a simple but effective way to break out of the monotony of the dropdown menu on mobile. Feel free like and comment and to clone and tweak this project as you wish.

3D Menu Animation

Can you really recreate a 3D fly-by animation on a 2D plane?

While watching this video on Webflow University (https://www.youtube.com/watch?v=J2846GiZuLA), I was inspired by the aerial footage in the first 5 seconds of the clip, with a stunning drone view of the Golden Gate Bridge.

I asked myself the question: how can you re-create the same spectacular video in Webflow and can it be done on a flat plane?
 
This was a quick fun experiment, so it's only desktop compatible for now. Feel free clone this and tweak it as you like!

San Francisco

Valdis Zhvaginsh

Glitch effect and perspective [Cyberpunk 2077]

WebDev For You

Welcome to daily interaction #95. This demo showcases a 3d marquee on page load.

For this demo I had two blocks inside of a wrapper with a perspective applied to it to create a 3d space. I also applied a self-perspective to the block themselves which seems to have altered the position of them as well. Still grasping the concept of self perspective and child perspective, but it's been a fun learning process. I then added text blocks inside of each left and right block. I set the overflow to hidden for both blocks so the text could move in and out of each block.

For the animation I just have the text move in from 100% to -100% on the x-axis. The duration of the text movement is 5 seconds. The second text has a delay of 2.5 so the animation works because the text blocks have the same width. Also the easing is set to linear so the easing doesn't effect the time and the text looks like it's just passing through each block.

Inspired by: https://codepen.io/comehope/pen/GdrrZq

WebDev For You - Daily Interaction #95

Mubarak Marafa

Using a combination of simple and subtle interactions, I added depth and perspective to these cards! Doesn't the food look like you can just reach out and grab it?

Watch how I built this here: https://www.youtube.com/watch?v=4VaLk5cIHME

3D Food menu cards

Alex Tourgis

Happy to develop on Webflow the brand new Angell's website, the best mobility experience for change the city.

Angell / S

Pixel Jam Ltd

Came up with a really nice hero interaction for a client recently. The way this effect is achieved is by having 4 separated layers with different levels in the Z axis.

Perspective Camera Shift (Mouse Controlled)

What IF Web

We’re excited to share this beautiful Hero Section cloneable, crafted by our very own Jacob Dobson and built with Finsweet's Client First. 🖌️

Featuring smooth interactions and animations, this hero section is perfect for making a great first impression. ✨

Classy Hero Animation w/ Interactive Preloader

Harshit Agrawal

Hii Everyone!
It's super Interesting to learn 3D in Webflow.
I made a basic table all using div blocks :)

Any 3D Shapes and Ideas you have in your mind? Share with me and I will try to make it live.
Thanks

3D Table with Div Blocks

Image distortion

No custom code, everything @webflow native

This interaction is one step forward to build something similar to https://andreasantonsson.dev. This was requested by @socoloffalex. 

The full build coming soon.

049 - 100 days of @webflow interactions

#49 Image distortion

1070795817

1309657251

1316201488

1316201489

1592612642

1863160016

1905118106

2144870841

2216482092

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

2546957535

2789269995

2857348505

2929119789

3112069432

3258716925

3289310561

3313039722

352651922

3557227276

3590523401

3591394191

3686551772

3913199261

3931106129

3934148661

4041193489

4083567884

4092855684

4103643638

4206156914

451433404

622649767

622649768

657188092

737109165

772001133

882147072

938734410

105340574

1120744071

1131151533

1171384976

1185683512

1197475705

1197746894

1229056119

1234765101

1236803103

1290849437

1292405251

130043074

1322655470

1336067073

1350250754

1380896143

1406455659

1418395020

1433303746

143629253

1455163268

1455742168

1457420719

1458975701

1499868407

1501922903

1557989767

1568482678

1587714147

1665126082

1680586027

1753134293

1775656907

183596474

1857805694

1925696804

1928608458

1944913766

1968719184

2031799369

2085494476

2091902242

21336891

214950889

2161096664

2182233325

2193997669

2195150436

2198334698

2224902271

224017973

23146391

2340184165

2348917033

2354820654

2361218180

2388854597

2433588987

2458909760

2465149363

2487845889

2491501114

2494249199

2502070427

2519229707

2524380347

2529408901

2550320370

2605123638

2636510003

2663519398

2685146257

2702114298

2714120603

2715927287

2718510159

274817750

2753418190

2759911512

2776696732

2781896974

2825044701

2860045578

2867851366

2886076224

2886816758

2907110567

2974679073

2978864049

3017737205

3049370236

3081421921

3091005856

3096464966

319846500

3221145664

3229469216

3245744487

3258263545

3330964648

3375039294

3385366709

3446095163

3472268204

347694146

3549982661

3569511999

3570326623

Best Perspective Websites | Free Examples & Designs

Discover Perspective websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Perspective websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. .css-ac9ku6{color:#2E5CFF;font-weight:normal;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}.css-ac9ku6:hover{-webkit-text-decoration:underline;text-decoration:underline;}Looking for templates?

Discover Perspective websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?