Tutorials

Transforming elements in 3D using CSS3

Abdulhafiz Abdulfatai

Dec 29, 2021 • 4 min read

With CSS3, you can apply animated effects on Web page elements in 3D as well as 2D.

In this tutorial we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page.

CREATE A PAGE WITH AN IMAGE ELEMENT

Create a basic page with a CSS section in the head area, as follows:

<!DOCTYPE html> <html><head><style type="text/css">/*CSS here*/</style></head><body></body></html>

We will use an image to demonstrate the effects. Add the following code to the body section of your page, altering the source attribute to use your own image file:

The click listener JavaScript function is purely for demonstration, so that you can see the effect as it happens. In your own pages you will of course need to incorporate the transform effects with any other functionality you have in place.

STYLE THE PAGE

Add the following CSS code in the style section to apply default styling to your image element:

img { margin:50px; /*general version*/transition: 2s; /*browser specific versions*/-moz-transition: 2s; -webkit-transition: 2s; }

We apply a margin of 50px to accommodate the image as it rotates, but depending on the size of your own image, you may wish to alter this. When the user clicks the image, the browser will apply the 3D transform. To make this happen gradually so that you can see the effect unfold, we apply these transition properties making it last two seconds.

Notice the prefixes used in addition to the standard transition syntax – you will also see this throughout the transform code. The 3D transforms are not yet supported in Internet Explorer or Opera, so our CSS prefixes only need to accommodate Firefox, Safari and Chrome.

ROTATE THE IMAGE

You can rotate your image element with a 3D effect by specifying the X, Y or Z axis. To start with, let’s use the X axis by adding the following CSS code:

.transformed { /*General*/transform:rotateX(180deg); /*Firefox*/-moz-transform:rotateX(180deg); /*Chrome, Safari*/-webkit-transform:rotateX(180deg); }

Open your page in the browser and click the image to see the 3D effect. To see the rotation working on the Y axis, alter your CSS as follows, rotating the image 300 degrees as a variation:

.transformed { /*General*/transform:rotateY(300deg); /*Firefox*/-moz-transform:rotateY(300deg); /*Chrome, Safari*/-webkit-transform:rotateY(300deg); }

To rotate the image 270 degrees on the Z axis, add the following:

.transformed { /*General*/transform:rotateZ(270deg); /*Firefox*/-moz-transform:rotateZ(270deg); /*Chrome, Safari*/-webkit-transform:rotateZ(270deg); }

COMBINE EFFECTS

In most practical cases, you will use transform effects in conjunction with other effects rather than in isolation. When you use more than one transform, the effects combine to make varied results. These results depend on the order in which you supply the transforms in your CSS code. The best way to familiarize yourself with these is to experiment with them, so we will run through a few combinations to get you started. View your page in the browser each time you alter the CSS.

ADD A TRANSLATION EFFECT

Alter your CSS code to include a translation after the rotation transform, starting with the X axis as follows:

.transformed { /*General*/transform:rotateX(180deg) translateX(150px); /*Firefox*/-moz-transform:rotateX(180deg) translateX(150px); /*Chrome, Safari*/-webkit-transform:rotateX(180deg) translateX(150px); }

Notice that the translation moves the element along the X axis as it rotates. To rotate and translate on the Y axis, alter the code as follows:

.transformed { /*General*/transform:rotateY(120deg) translateY(-50px); /*Firefox*/-moz-transform:rotateY(120deg) translateY(-50px); /*Chrome, Safari*/-webkit-transform:rotateY(120deg) translateY(-50px); }

Notice that the translation uses a negative value, moving the element up the page as it rotates on the Y axis.

Next we will use the translation on the Z axis in conjunction with rotation on the X axis:

.transformed { /*General*/transform:rotateX(360deg) translateZ(100px); /*Firefox*/-moz-transform:rotateX(360deg) translateZ(100px); /*Chrome, Safari*/-webkit-transform:rotateX(360deg) translateZ(100px); }

Notice that in this case, the translation applies to the rotation effect itself rather than just the element in terms of its final position in the page. The translation alters the way in which the rotation unfolds, moving the image down the page while it rotates, but then returning it to the same point on the X and Y axes.

ADD A SCALING EFFECT

Next let’s combine the 3D rotation with scaling effects. Alter your code as follows, rotating on the X axis while scaling on both X and Y:

.transformed { /*General*/transform:rotateX(180deg) scale(0.5, 1.5); /*Firefox*/-moz-transform:rotateX(180deg) scale(0.5, 1.5); /*Chrome, Safari*/-webkit-transform:rotateX(180deg) scale(0.5, 1.5); }

Test the page to see that the scaling occurs while the rotation is unfolding. Alter your code one final time to scale on the X and Y axes while rotating on the Z axis:

.transformed { /*General*/transform:rotateZ(180deg) scale(0.5, 1.5); /*Firefox*/-moz-transform:rotateZ(180deg) scale(0.5, 1.5); /*Chrome, Safari*/-webkit-transform:rotateZ(180deg) scale(0.5, 1.5); }

CONCLUSION

In this tutorial we have tried a few combinations of 3D transforms in CSS3. As mentioned above, these effects can create potentially very complex results, particularly when used with multiple image resources. Developers are using these techniques to create sophisticated 3D images and animations. If you are experimenting with these effects on live sites, do remember the still very low level of browser support.