Introduction to CSS 2D and 3D transforms

Overview

2D and 3D CSS transforms let you alter how an element displays in two- and three-dimensional space, allowing you to move (translate), scale, and skew objects on your page.

And Webflow lets you do all that without writing code.

2D transforms

Two-dimensional transformations let you move (translate), scale, rotate, and/or skew an element on your page along the X (left and right) and Y (up and down) axes.

3D transforms

A three-dimensional transformation lets you move (translate), scale, rotate, and/or skew an element using the Z axis. To do this, you need to add perspective to the element or its parent element.

Z axis

The Z axis is a 3D axis that represents the plan of forward and or backwards in a 3D space. The diagram below demonstrates how this axis compares to your standard 2D axis in x and y.

About perspective in web design

Understanding perspective

To create 3D transformations, you’ll need to adjust the perspective.

Perspective is a CSS property that represents the perceived distance between your eyes and the content on screen. Typically, you view a website from a single distance (i.e., the website occupies 2D space). But by adding the Z axis we can adjust this perceived distance to visually create a 3D transformation.

There are two terms to remember when thinking of perspective:

1. Perspective value, which is the distance between your eyes and the content on screen.
2. Perspective origin, which represents the location of the eye looking at the element(s).

Perspective value

In the image above, the perspective value is represented by d, which equates to the distance between the assumed eye position and the surface of the element. Notice what happens when this value is increased (i.e., the Perspective value is increased): the circle (relative to the surface) appears smaller.

Though there’s no default value for this distance, most people use 800px to 1000px. Webflow defaults to 1000px.

Setting perspective in Webflow

In Webflow, you can adjust the perspective relative to the element itself (self), the child, and the parent.

Self perspective

Unlike child and parent perspective, the self perspective only affects the element it’s set on. You’ll find this in the transforms settings, which you can access by clicking the gear icon in the Transforms panel.

You would add a self perspective when you only wish to adjust this particular element. If you wish to add a perspective to multiple items, you would add a Child perspective to a parent element.

Child perspective

When you set a child perspective, it affects every element inside the current element. For example, you might set a child perspective on a div block to affect all the images inside it. The child perspective is located at the bottom of the Transitions and Transforms sections in the Style panel.

Parent perspective

Located on the bottom of the Transitions and Transforms sections is a section dedicated to show whether there is a perspective on a parent element (an element in which the selected element is inside of). You cannot add a parent perspective, this section is simply a label to show whether there is a perspective on a parent element or now.

Child Perspective vs Parent Perspective

You would add a Child perspective on an element like a div block or wrapper, something in which you have multiple elements inside and wish for them to share the same perspective. If you navigate to the child elements, you would see the Parent Perspective class at the bottom of the Transitions and Transforms section.

Understanding Perspective Origin

If multiple objects need to share a common perspective, we can adjust the Perspective Origin. Normally the assumed position of the viewer’s eye is centered on a drawing. So using the W3.org example, we’re changing the eye’s position, rather than the drawing’s.

In the example above, the eye position (the perspective origin), has been moved above its starting position at the center of the object.

Setting Perspective Origin

In Webflow, you can easily adjust the origin value in the Transforms settings when setting for the Self perspective.

When adding a perspective for Child elements, you will be given the ability to adjust the perspective origin there as well.

Adding Transforms

In order to add a Transform, you first need to add a class. By doing so you are granted access to the Style panel, where Transitions and Transforms are located.

Transform settings

You’ll find transforms in the Transitions and Transforms sections at the bottom of the Style panel. You can also access them by clicking on the gear icon. Here, you can adjust the Transform Origin, the Self Perspective, and whether the object has a Backface.

Transform Origin

This is the value of the Perspective Origin that we discussed earlier. It defaults to (50%, 50%), the center of the object, but you can change this using the text fields or the arrows to the left to pick a specific point (corners, top, bottom, left, right).

Self Perspective

The perspective set on the current element. You’ll find this setting in the transforms settings by clicking the gear icon in the Transforms panel. This is the equivalent of setting a Perspective value (the distance between the viewer origin and the element).

Backface

The Backface of an object is what you’d see on the back of an element if it were flipped around. When the Backface is active, you’d see a mirror-image of the object’s front.

If you set the Backface to not be visible, the element will seem to disappear when flipped.

Transform Properties

Once you’ve set the perspective, you can start to add transforms to the element. You do this by adjusting 4 properties:

1. Move (Translate)
2. Rotate
3. Scale
4. Skew

By mixing and matching these properties, you’ll be able to create a wide variety of unique designs and interactions.

Move (translate)

This will move an element in any direction. You can move the object up and down in 2D space using the Y axis, or left and right using the X axis.

You can also move the element on the Z-axis, which will move the object closer to or further away from the viewer when a perspective is set.

Rotate

This lets you rotate an object from -180 degrees and 180 degrees, though you can rotate beyond 360, if you need to.

You can rotate an object on all three axises: X, Y, and Z.

Rotate on X axis will flip the object along the X axis:

Rotate on Y axis will flip the object along the Y axis:

Rotate on Z axis will rotate the object clockwise or counterclockwise from a 2D space:

Scale

Scaling an element lets you increase and/or decrease an object’s size. You usually adjust scale on the X and Y axes at the same time, but you can scale an object on only one of the axes to create a distorted look.

When scaling on both the X and Y axis, the element will grow or shrink in size proportionally.

Scale on the Z axis is different. By itself scaling on the Z axis nothing, but with other transform combinations it can add an effect.

Skew

The act of skewing an element is to stretch the object in one direction or another using the x and y access.