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

Learn how to build this and many other interactions on my YouTube Channel at https://www.youtube.com/watch?v=gSWQPaybNiI

Learn how to build a working CMS Pricing Calculator and other Javascript lessons on my Patreon at https://www.patreon.com/timothyricks

T.RICKS Glassmorphism

Asad Digital

Hi! Here's the new version of the flipping cards. Feel free to clone it and use in your projects.

Flipping Cards

I wanted something engaging and original, that utilised everything Webflow can offer, it's playful with 3D Tranforms and Interactions to create a hopefully, engaging experience and showcase my work in its best light.

Aaron Grieve Portfolio

Aaron Grieve's Portfolio

New cyberspace transmission detected. Please intercept and initiate visual scan...

The concept behind this website is that you 'Add to Cart' the different web elements you require to build your new website before checking out to open the contact form. No real products or transactions involved! The 3D images are modeled and rendered in Blender. Also includes a Sketchfab embed to view the 3D model. Thanks for looking! :-)

Web Elements

Web Elements 3D

A collection of useful animations made on wedflow.

Check out Webflow Samples 2: http://wfs2.webflow.io/

Webflow Samples

webflow-samples

With the new Ghostbusters movie coming, I wanted to build a proper movie site for such an amazing franchise. Celebrating the new and showcasing the originals.

I've also made the project cloneable. I'm new to development and have pulled snippets from multiple different projects. I still have a lot to learn but if this project is helpful to you, that's awesome!!

Features and Accolades
• Mocktober 2020 winner
• CSS Design Awards
  → Special Kudos
  → Best UI Design
  → Best UX Design
  → Best Innovation
• CSS Winner: Site of the Day
• One Page Love
• Muzli 

All visuals belong to their respective owners.

GB-afterlife

Unofficial Ghostbusters Afterlife Website

Interactive scrollable 3D isometric Grid. 
Build 100% in Webflow. 
Inspired by Codrops Article (http://tympanus.net/Development/IsometricGrids)

3D experiment

3disometric-grid

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

In January I started a new series, in which I built a marketing website for the car manufacturer startup Sono Motors. The idea was to present the features and benefits of the solar car SION and to implement them interactively in Webflow. The website was created during their #SaveSion campaign, in which the company had raised more money for the production of the car. In addition to my down payment, I saw the project as an additional support to help the startup by raising awareness about the campaign through my own channels. 

This project resulted in 10 Webflow YouTube tutorials. I published the responsive design process via my Patreon account. 
The image copyright belongs to Sono Motors GmbH.

Click here for the YouTube playlist with all videos of this project: https://youtube.com/playlist?list=PLj8c0yntElwWRnvBXxEnoxkynxriQKndL

Follow the responsive design process on my Patreon account: https://www.patreon.com/posts/77302808

Learn more about the Sion: https://sonomotors.com

SION – #SaveSion

SION – Car Startup Website (free Template)

Combined Webflow and Blender to show how a Sofa retailer landing page could look. Feel free to clone this project.

Pages built: Home

__


You can thank me by:
• Hiring us to help you rebrand in 1 month 👉 oracleadvertising.com

• Following me on Behance 👉 https://www.behance.net/oracleadvertising

LUX Sofas

lux-sofas

Landing page created for my latest Youtube tutorial about how to create 3D scroll animations using Lottie + Webflow.

Link for the video: https://youtu.be/vMxCjhi-3p4

FantomUI Landing Page

Fantom.UI - Free landing page

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation | Free Template

3D Tablet Scroll Animation in Webflow | Free Template

Just playing around with 3D transforms and Webflow's sick interactions, feel free to clone and use in your own projects :)

001 Click Expander

Click Expander

I finally decided to get my hands dirty and learn ThreeJS + React Three Fiber to give life to my ideas using interactive 3D. This project is the end result of my tests and study.

Highly inspired by the Work Louder(c) Creator Micro pad (https://worklouder.cc/creator-micro/), I created a fictional collab between your favorite website builder and this amazing product for a limited edition with custom shortcuts to improve your workflow.

My process:
- 3D model, materials, lights and animation done in Blender
- Used CodeSandbox Cloud to put everything together in R3F (plus some custom scripts used on the Webflow page via data attritbutes)
- Loaded the generated JS bundle in Webflow using custom code

- YOUTUBE TUTORIAL: https://youtu.be/XOIU3mdR9Sc
- Link to the CodeSandbox template: https://codesandbox.io/p/sandbox/flowboard-r3f-b95nx9

Flowboard

Flowboard - Webflow + ThreeJS template

Had some free time on my last flight and created this moving 3D balls.
The shapes are made with divs and color gradients... no images or custom code.

Follow my profile to get notified about new tutorials of cool Webflow tricks.

Feel free to clone!

3D balls

3D interactive balls

Playing around with the 3D Capabilities of Webflow. It's my playground, feel free to clone it!

Aaron's 3D Testing Environment

Redis Agency

In just a year with Webflow, we have launched dozens of projects, won international awards and expanded the team to 6 creative developers. It is about time that we open a separate department for creative development. We are celebrating this by launching the Webflow department website.

This landing page is dedicated to our love for Webflow, our clients and their projects, and our team. It also showcases the new corporate identity of Redis Agency. Noteworthy that smooth scroll and while scrolling in view animations are implemented without code.

Click the link to see it for yourself. Let it Webflow!

Redis Webflow

Redis Agency Webflow

Vergo is a financial technology company and is not a bank. Banking services provided by Blue Ridge Bank, N.A.; Member FDIC.

It's not often you get the opportunity to work across every touch point. With my full vision and skill set on display I worked across the Art Direction, Brand, Digital, Dev and Product Design.