64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).

CSS3 vs Photoshop: Transforms


Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs Photoshop: Opacity and Transparency

It's time for some more CSS3 vs. Photoshop, and on this occasion we're going to dig into transforms. Changing an object's shape is a huge part of any graphic editor's toolset. These days, with CSS3 we can rotate, scale, and skew an element's shape without the need for Photoshop. Let's try it!

Note: All the following examples were tested on Mozilla Firefox, Safari and Chrome. If you want to get something similar in IE or any other browser leave a comment and I will be glad to help you.

Before We Get Started

In this tutorial we will use Gradient Backgrounds, Box Shadows and Multiple Images Backgrounds as well as Transition effects and Opacity and Transparency styles, topics covered in the first three tutorials of this series:

Step 1: Rotate

Rotating an element is one of the more basic features of any graphic editor. The Rotation effect uses a Radial Coordinates value with angles from 0 to 180 (both positive and negative). A positive angle becomes a clockwise rotation and a negative angle means a counter clockwise rotation.

In the past it was typically very complicated to rotate an element in HTML, now with CSS3 everything is very simple:

Here are the syntaxes of a Rotation Transform:

transform: rotate( <number> deg);

Now set a bunch of different angle rotations for HTML sections:

As you can see, the manner with which we determine transformations is exactly as in Photoshop.

View Demo

Step 2: Scale

Another basic transform option that you can get with any graphic editor is Scale. Scaling is pretty simple, it increases or reduces the width and height of any element, or group of elements.

With CSS3 you can scale elements pretty much the same as in Photoshop, the syntaxes to scale along both axis being:

transform: scale(<value>); //Both width and height
transform: scalex(<value>) //Width
transform: scaley(<value>) //Height

Let's see a bunch of examples:

Now see it running:

View Demo

Step 3: Skew

Moving on to another very basic yet powerful transform: Skew. By changing an angle you can displace the parallel lines of a shape creating a perspective illusion which can be used as a 3D effect.

With CSS3 it's possible to skew a shape just as in Photoshop, let's see some examples:

View Demo

Step 4: Combine Transforms

Let's try to combine transform styles to create some radical effects:

View Demo

Step 5: Some Fun Examples

Below are some fun examples of what can be achieved using transforms. We'll begin with my Photoshop renderings of the designs, then we'll see if we can get the same result with CSS3 (you can download the PSD source in the tutorial files).

Firstly, set up some general CSS:

Translucent Fan and Vertical Title

In the first effect, we have a fan of three divs and a heading tag. The trick here is to use the z-index property to properly arrange the content.

The HTML Structure:

Now style the divs and the heading:

Rotate on Hover

You can independently rotate all the elements inside an html element. This, combined with transition effects, can be a great way to add focus to some areas of your designs. Take for instance the following HTML mockup:

Now rotate the image and the container box at different angles (clockwise and counter clockwise) within the :hover pseudo class.

Complex Skew to Create a Reflected Box Layout

Let's move the things a step further. With Skew Transforms you can a sort of 3D depth to your sections. Let's try to build an alternative way of showing an item from a media gallery, using a title, description, and an HTML5 video tag!

Let's start with the HTML mockup:

Since a <video> tag can be handled as any other HTML element, we can apply almost all the styles we know to it.

First, set up the background of the container section. The following code generates a glossy gradient creating some kind of "horizon" to mock up the next elements.

Set the common styles for text.

Now style the front container, <video> tags can handle almost all CSS styles we know, and behave as any other HTML block level element.

Now the side section (can be the video brief, or an introductory text.

Let's style the title.

Now that we have the main divs in their proper place, we will add a couple of "floor reflections" (divs with an RGBA gradient background) just to give this section a more glossy effect.

Check out this set of examples running in a browser:

View Demo


Have a go yourself and see what can you create with CSS3 transform options. Thanks for reading!