I’ll be your Webflow guide as we explore the third dimension and the opportunities that Webflow provides to designers.
This article is about sharing my experience using a 3D transforms feature. I will not include step-by-step instructions, because the Webflow team has already done a great job creating tutorials for us.
3D elements are a big trend in web design, but working with 3D can be a real challenge for a team. Often, clients opt out of using 3D elements because they’re worried that implementing these elements will put a strain on their budgets or because it’s seen as too detailed for an MVP version of a website.
However, there are some newly discovered ways of implementing designs. This is the point where our journey begins.
[Journey to The Third Dimension. Tool: Сinema 4D]
What is Webflow?
Webflow is a tool to build dynamic, responsive websites without coding. If you’ve ever been frustrated with the process of building a website because it was confusing or complicated, then you’ll be pleased to know that Webflow makes building much easier.
[Webflow screenshot: Designer’s workspace]
Webflow generates clean, W3C-compliant HTML and CSS code. It allows you to embed code for new effects in HTML sections. Custom code gives total freedom over actions and ideas. For example, it’s possible to customize a modal window by adding various effects.
As you can see, Webflow is more than just a drag-and-drop website builder. A large community of users contribute to Webflow's well-being and development with articles and video tutorials across various design blogs and forums.
Webflow’s team is eager to make using their app simple and joyful.
CSS 3D Transforms
A transformation is an effect that lets an element change shape, size, and position. CSS 3D transforms support 2D and 3D transformations.
The default mode for design work for the web has been to build two-dimensional design elements. These elements have width and height, and we move them around the screen horizontally and vertically. Examples of such two-dimensional elements include most anything you see on a website: images, buttons, headings, and paragraphs.
Moving to the third dimension can be imagined as adding depth to elements, and adding movement toward and away from the viewer.
CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. These transformations include rotation, skewing and scaling.
Understanding the fundamentals of CSS 3D transforms will help you come up with more ideas for your experiments. Also, it will definitely ignite your creativity.
CSS 3D transforms are smooth and hardware-accelerated, but without the help of a developer they can be a serious challenge for designers who aren’t thrilled about writing code.
Using Webflow for this purpose is an elegant solution to this problem.
3D transforms in Webflow
3D transforms allow us to build CSS transformations visually, which is a great option for designing without a single line of code. Designers can immediately see how fast various elements are animated and how much perspective they need without having to switch back and forth between the browser and the editor.
Webflow provides designers with a clear understanding that not all 3D has to be an extrusion or a 3D object.
You can actually take individual 2D elements and interact with them inside of the 3D space along the z-axis: for instance, you can move them or rotate them in various ways.
[3D transforms using Webflow: A flip-card effect]
Webflow encourages us to build any number of shapes and forms. Also, this tool is amazingly fast: it took me approximately five minutes to create this cube:
[A simple 3D cube in Webflow]
If you want to learn the basics of adding 3D transforms I do recommend starting with the intro to 3D. After this lesson, you’ll be familiar with the fundamentals of movements along the X-axis, Y-axis, and Z-axis.
There are plenty of possible combinations that will help you create 3D transformations visually. Use your imagination to combine them or feel free just to use my ideas.
Useful Webflow tricks for your website
1. Prepare some creative patterns for your objects. Even a basic shape can look different depending on your choice of pattern.
[Webflow 3D cube with dots]
2. Combine your 3D transforms with Webflow Interactions.
3. Add elements with transparent backgrounds.
[Elements with transparent backgrounds in Webflow]
4. Use GIFs to apply to your 2D elements.
Also, make sure that all your images are High DPA.
[Image settings in Webflow]
3D transforms change the way we think about the canvas of web design. Furthermore, they change the canvas itself, trading in the flat surface for voluminous depth.
Now is the time to start using three dimensions to elevate our works.
I hope, that my treaks will be useful for you. Feel free to share your experiments inspired by my Webflow observations.
Don’t hesitate to contact me if you will have any questions! You can find me on Twitter.