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

I loved Dries Bos's portfolio (http://driesbos.com), so I gave rebuilding it in Webflow a shot!

This minimal portfolio features a cubic, 90's retro look. Each block reveals a preview when you hover over. The blocks are stackable, making it easy to add or remove items.

I've implemented a custom cursor. I've written Javascript to remove in-line styles added by Webflow interactions to avoid clashes once the page load animation is completed.

Retro Cube Portfolio

90's Retro Style Portfolio

Welcome to daily interaction #92!

I love 3d-effects! This one was a lot of fun. It’s just a simple 3d box that rotates in the center of the viewport as the user moves their mouse around. It took me a moment to get the 3d box to rotate from the center until I applied a color to the cube wrapper and saw that the cube was sitting on top of the wrapper rather than in the center. So I moved each side of the box forwards 50px since each side is 100px by 100px. This placed each side in the center of the wrapper so when the wrapper rotates the cube rotates from the center :D. I moved each side forward 50px on the z-index. I could have placed the sides in another wrapper and moved that wrapper forwards 50px on the z-axis, but I thought moving each side forward would allow for more creativity afterwards :). I also left all the sides grey. I had many ideas for different colors, text, or images that could be placed on each side, but I wanted to focus more on the actual animation.

WebDev for You - Daily Interaction #92

WebDev For You - Daily Interaction #92

This simple section with a 3-D cube can be customised with images or videos, making for an interesting features section. Feel free to stack effects on top of this!

The 3-D cube rotation is achieved through Webflow interactions and transforms.

Cube Effect

3-D Cube for Features

Are you having a hard time making Three.js work on your website? 

This cloneable shows you how to use Three.js in Webflow so that you can start your journey in learning and building with Three.js in Webflow

A starter template to use Three.js in your Webflow project.

Feel free to clone and enjoy! :)

Three.js Template

3D animation of a rotating cube with different pictures and titles in front. Portfolio concept

UPDATE: Now optimized for mobile.

Portfolio Cube

Hi my gorgeous friends of Webflow,

This cloneable was built from a Jacob Foster's project:

https://codepen.io/Alca/pen/GRyBJZX

I tweaked the code a bit to make it fully responsive and directly configurabile from your Webflow project by using attributes. 😊

Things you can customize through attributes:

- Particle color (HSL format)
- Scale factor for desktop/tablet and mobile, for better responsiveness
- Particle density
- Cube perspective
- Particle spread
- Particle velocity

Just add the corresponding attributes to the div you want to host your canvas animation in and play around with attribute values! 😁

Look for the 'hero-section__canvas-host' element inside my project to get the whole list from the Element Settings panel and don't forget to add the 'fc-canvas-host' attribute as well!

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

Animated Cube Particles With Canvas

Hi my Webflow friends,

A bit of jQuery gives you endless powers.

This project only uses a single CMS collection list to populate both the cube and the images on the background.

Just scroll down, enjoy, clone, and feel free to leave a comment.

Have an awesome Webflow journey y'all!

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

*********

The amazing pictures are from Jakob Owens on Unsplash:

- http://www.directorjakobowens.com/
- https://instagram.com/jakobowens
- https://twitter.com/jakobOwenss

CMS jQuery Cubic Scrollable Image Gallery

Classic Studio

A simple exercise with 3D transformations working with scroll interactions. Feel free to clone and mix.

Cube by Classic Studio

Bookmark

3D cube

056 - 100 days of @webflow interactions

#56 3D Cube

#56 3D cube

Website created for Build2Connect. An IT-specialist based in the Netherlands.

IT is often seen as something really complicated and scary. Build2connect wants to change this by being clear and simple. This is where our playful website comes in. Making IT fun with dynamic elements which respond to your clicks. While delivering a message to 'dump' your IT-struggles at Build2Connect. Build2connect collects them, analyzes them, and sorts them out. Building and connecting your IT!

Discover cube websites built by the Webflow community

Discover cube websites built by the Webflow community