## Transform your images and shapes using CSS3

2D Transforms are becoming more popular as web designers and developers become more daring in their use of CSS3. 2D Transforms offer us the means of using CSS to rotate, scale, skew and move elements whether for SEO or aesthetic reasons. With clean code, you may use these selectors to style a webpage making it attractive to both the user and search engines.

You may use 2D transforms to move, turn, spin, stretch and scale elements on a webpage. Photographs appear as dropped onto a table top. A square may be scaled when on hover. A triangle gently spins when clicked. A line of rectangles are slewed to one side as a page divider. There are a huge number of possibilities using 2D Transforms. These examples are the tip of the iceberg.

#### Why use 2D Transforms

Once upon a time web designers would use a multitude of images containing shapes and text which while looking pretty where absolutely useless when it came to SEO (Search Engine Optimisation). Search engine bots and spiders which crawl the internet continuously generally cannot read the content of images. Your Google or Bing rank will not be improved by using effects within images no matter how pretty or informative they may be to the user. A way was needed to satisfy the needs of both search bots and users. Enter CSS and most recently, CSS3, giving us the tools to create the same effects with code as we had with images.

#### 2D Transform – Rotate

You may use the rotate method to rotate an element on your webpage. Positive numbers rotate the element clockwise whilst negative numbers rotate the element counter-clockwise.

For example:

1 2 3 4 5 6 7 |
div { -moz-transform: rotate(345deg); /* For Firefox 3.5 to 15 */ -ms-transform: rotate(345deg); /* For IE 9 */ -o-transform: rotate(345deg); /* For Opera 10.5 to 12.1 (Opera moved to -webkit- from version 15 onwards) */ -webkit-transform: rotate(345deg); /* For Safari 3.1+ and Chrome 4.0+*/ transform: rotate(345deg); } |

The example above rotates the div element 345 degrees clockwise. An equally effective alternative would be to rotate counter-clockwise by -15 degrees.

#### 2D Transform – Scale

You may use the scale method to resize an element on your webpage. The element increases or decreases in size depending upon the parameters entered for X-axis (width) and Y-axis (height). Negative numbers may be used for decreasing the size of an element.

For example:

1 2 3 4 5 6 7 |
div { -moz-transform: scale(0.5,0.5); /* For Firefox 3.5 to 15 */ -ms-transform: scale(0.5,0.5); /* For IE 9 */ -o-transform: scale(0.5,0.5); /* For Opera 10.5 to 12.1 (Opera moved to -webkit- from version 15 onwards) */ -webkit-transform: scale(0.5,0.5); /* For Safari 3.1+ and Chrome 4.0+*/ transform: scale(0.5,0.5); } |

The example above decreases the the size of the element by half for both width and height.

#### 2D Transform – Skew

You may use the skew method to skew an element on your webpage. The element turns in a given angle depending upon the parameters set for X-axis (horizontal) and Y-axis (vertical).

For example:

1 2 3 4 5 6 7 |
div { -moz-transform: skew(45deg,30deg); /* For Firefox 3.5 to 15 */ -ms-transform: skew(45deg,30deg); /* For IE 9 */ -o-transform: skew(45deg,30deg); /* For Opera 10.5 to 12.1 (Opera moved to -webkit- from version 15+) */ -webkit-transform: skew(45deg,30deg); /* For Safari 3.1+ and Chrome 4.0+*/ transform: skew(45deg,30deg); } |

The example above skews the element 45 degrees on the X-axis (horizontal) and 30 degrees on the Y-axis (vertical).

#### 2D Transform – Translate (Move)

You may use the translate method to move an element on your webpage. The element moves from its current position depending upon the parameters set for the X-axis (left) and Y-axis (top).

1 2 3 4 5 6 7 |
div { -moz-transform: translate(20px,40px); /* For Firefox 3.5 to 15 */ -ms-transform: translate(20px,40px); /* For IE 9 */ -o-transform: translate(20px,40px); /* For Opera 10.5 to 12.1 (Opera moved to -webkit- from version 15+) */ -webkit-transform: translate(20px,40px); /* For Safari 3.1+ and Chrome 4.0+*/ transform: translate(20px,40px); } |

The example above moves (or *translates*) the element 20 pixels to the left (on the X-axis) and 40 pixels down from the top (on the Y-axis).

#### 2D Transform – Matrix

The final 2D transform to include is the Matrix method, although you will probably never use it. You may combine all of the above methods into one property using the Matrix method.

1 2 3 4 5 6 7 |
div { -moz-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); —ms-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); -o-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); -webkit-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); } |

The Matrix method uses mathematical functions to combine the 2D transforms into one property. The values are in the form of a linear transformation matrix.

#### The easy way to combine methods

There is a much easier way to combine the 2D transform methods than using the mathematical Matrix method. It is easier to read and understand in one glance than the Matrix method.

For example:

1 2 3 4 5 6 7 |
div { -moz-transform: scale(2.5) rotate(45deg) translate(150px, -120px) skew(35deg, -35deg); —ms-transform: scale(2.5) rotate(45deg) translate(150px, -120px) skew(35deg, -35deg); -o-transform: scale(2.5) rotate(45deg) translate(150px, -120px) skew(35deg, -35deg); -webkit-transform: scale(2.5) rotate(45deg) translate(150px, -120px) skew(35deg, -35deg); transform: scale(2.5) rotate(45deg) translate(150px, -120px) skew(35deg, -35deg); } |

The example above uses one expression to combine multiple 2D transform methods for one element. It is quite self-explanatory as you can see each 2D transform method clearly and therefore it is easier to use than the Matrix method which requires mathematical construction.

#### Inline and Block

2D Transforms are used with both block and inline elements. Unfortunately older versions of Safari have difficulty using 2D Transforms for inline elements. You may work around this using display: inline-block; This will not affect how 2D Transform methods are used on the screen but it will enable early versions of Safari to use them correctly.

#### 2D Transform methods and properties

Here is a summary of 2D Transform methods and properties. You will note with some methods you can specify if you are changing a value only for the X- or Y-axes.

Function | Description |

transform | Applies a 2D or 3D transformation to an element |

rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |

scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |

scaleX(n) | Defines a 2D scale transformation, changing the element’s width |

scaleY(n) | Defines a 2D scale transformation, changing the element’s height |

skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |

skewX(angle) | Defines a 2D skew transformation along the X-axis |

translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |

translateX(n) | Defines a 2D translation, moving the element along the X-axis |

translateY(n) | Defines a 2D translation, moving the element along the Y-axis |

matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |

*Table data source W3Schools*

#### Browser Support

As noted above, 2D Transforms are now widely supported in modern browsers including:

- Mozilla Firefox 3.5 and later
- Safari 3.2 and later
- Google Chrome 10 and later
- Opera 10.6 and later
- Microsoft Internet Explorer 9 and later
- iOS 3.2 and later
- Android 2.1 and later
- Opera Mobile 11 and later

Older versions may be supported using the appropriate vendor prefix as demonstrated in the examples above for each method.

### Share this post and your thoughts!

Good luck using CSS 2D Tranforms in your work. I hope you found this tutorial useful and I would love to hear your thoughts on using 2D Transfom CSS properties – your thoughts and practices.

## Leave a Reply