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

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

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

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

go-farther

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

Keyboard Controlled Menu

MM—009: Keyboard Menu

Bookmark

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

#51 Portfolio Landing

Portfolio landing

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

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

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 Mockup

interactive-ipad

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

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

3D Menu Animation

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

WebDev For You - Daily Interaction #95

Glitch effect and perspective [Cyberpunk 2077]

También

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

Angell / S

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

Even More Cards

3D Food menu cards

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 space

3D Table with Div Blocks

More experiments in 3D effects using Webflow. Created using perspective and multiple divs each with a increased Y rotation transform to give the impression of a sphere.

Rotating Sphere

rotating-sphere

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 Hero (Mouse Over)

Perspective Camera Shift (Mouse Controlled)

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

Discover perspective websites built by the Webflow community

Discover perspective websites built by the Webflow community