CSS3 2D Transforms

Use CSS3 transform property to apply a two-dimensional transformation

Creative CSS

Designing with CSS – CSS3 2D Transforms

CSS3 2D Transforms allow for various transformation to be applied to elements, such as scaling or rotating, in two-dimensional space. It is possible to apply one or many transforms to a single element. This allows for effects such as rotating text or images at an angle, and can be combined with transitions to apply interactive effects such as scaling up elements when the users interacts with them.

A two-dimensional transformation is applied to an element through the transform property. The value of the transform property is a list of transform-functions applied in the order provided. The individual transform functions are separated by whitespace.

The transform-origin property sets the point of origin from where the transform takes place.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

CSS3 2D Transforms

You choose a value for scale between 0.1 and 2, how many degrees to rotate, how many pixels to move the X axis and the Y axis (translate), and how many degrees to skew the X axis and the Y axis. The code will be generated.

Your Code:

transform: scale(.5) rotate(5deg) translate(5px, 5px) skew(5deg, 5deg); 
-moz-transform: scale(.5) rotate(5deg) translate(5px, 5px) skew(5deg, 5deg);
-webkit-transform: scale(.5) rotate(5deg) translate(5px, 5px) skew(5deg, 5deg);
-o-transform: scale(.5) rotate(5deg) translate(5px, 5px) skew(5deg, 5deg);

If your browser supports CSS3 transform property, I give you below a few examples to demonstrate rotation, scaling and translation.

In each of these examples there are two inner boxes, the box on the left side (blue in color) is without any transform, and the box on the right (red in color) is with transform applied. See the transformation rendered on the right box.
Setting Origin of Transform
The initial transform-origin value is 50% 50% which is the centre of the element – 50% from the left of the element and 50% from the top of the element. The origin can be specified using either a length, a percentage or the keywords left, center or right (for the X co-ordinate) and top, center or bottom for the Y coordinate.
The first value specified is the X coordinate and the second value is the Y coordinate. The value of the X and Y coordinates are calculated from the top left-hand corner of the element.

Examples of CSS3 2D Transforms

Example1 (2D Transform: Scale)

CSS Code:

transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform-origin: left top;
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-o-transform-origin: left top;
CSS3 2D Transform – Scale
The scale transform function scales (enlarges or shrinks) the element it is applied on by the value specified from the point of origin.
In this example, scales the right inner box 1.5 times from the top left of the element.
To scale an element smaller, a value less than 1 is used such as 0.5 for halving the size of the element.


Example2 (2D Transform: Translate)

CSS Code:

transform: translate(100px, -50px);
-moz-transform: translate(100px, -50px);
-webkit-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
CSS3 2D Transform – Translate
The translate transform function moves the element from its original position in the document to the new location specified by the X and Y co-ordinates supplied.
In this example, moves the right inner box 100 pixels to the right and 50 pixels up from the centre of the element.


Example3 (2D Transform: Rotate)

CSS Code:

transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
CSS3 2D Transform – Rotate
The rotate transform function rotates the element around the point of origin and is specified in degrees.
In this example, rotates the right inner box 30 degrees clockwise.
A negative value will rotate the element anti-clockwise.


Example4 (2D Transform: Skew)

CSS Code:

transform: skew(20deg, 10deg);
-moz-transform: skew(20deg, 10deg);
-webkit-transform: skew(20deg, 10deg);
-o-transform: skew(20deg, 10deg);
CSS3 2D Transform – Skew
The skew transform function skews the element along the X or Y axis, or both.
In this example, skews the right inner box 20 degrees on the X axis, so that it is leaning to the left, and 10 degrees on the Y axis, so that it is sloping from top to bottom.
If a negative value is supplied the skew is performed in the opposite direction, i.e. leaning to the right for a negative skew on the X axis, and from bottom to top for a negative skew on the Y axis.


Example5 (2D Transform: Compound)

CSS Code:

transform: translate(100px, 50px) scale(1.5, 1.5) rotate(30deg);
-moz-transform: translate(100px, 50px) scale(1.5, 1.5) rotate(30deg);
-webkit-transform: translate(100px, 50px) scale(1.5, 1.5) rotate(30deg);
-o-transform: translate(100px, 50px) scale(1.5, 1.5) rotate(30deg);
CSS3 2D Transform – Compound
Multiple transforms can be applied to one transform property using a space-separated list. When compound transforms are used, they are applied one after another linearly from left to right.
In this example, moves the right inner box 100 pixels to the right and 50 pixels down from the centre of the element, then scales it by 150%, and then rotates it 30 degrees clockwise about the Z axis.
Note that the scale and rotate operate about the center of the element, since the element has the default transform-origin of 50% 50%.


Example6 (Transitions with Transformation)

CSS Code:

transition:all 5s 2s ease;-moz-transition:all 5s 2s ease;-webkit-transition:all 5s 2s ease;-o-transition:all 5s 2s ease;
width:100px;height:100px;background:blue;border:2px solid silver;

CSS Code for Transition on Hover:

background:red;border:2px solid gold;
transform:translate(100px, 50px) scale(1.5) rotate(30deg);
-moz-transform:translate(100px, 50px) scale(1.5) rotate(30deg);
-webkit-transform:translate(100px, 50px) scale(1.5) rotate(30deg);
-o-transform:translate(100px, 50px) scale(1.5) rotate(30deg)
Transitions with Transformation
In this example, we show you how you can animate the transformation with the transitions.
It is the same example as above but I have animated the transformation by applying transition.
Hover over the second inner box to see CSS transitions in action along with transformation.

Browser Support
Box outline offset is currently only supported in Firefox 3.5+ Chrome 3.0+ Safari 3.2+ Opera 10.5+
Check it out! Whether it works for you or not, please share with me by writing a comment, and mentioning your browser and version. Your feedback would be immensely helpful.
CSS3 Generator
W3C CSS3 2D Transforms Module
CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space.
CSS3 2D Transforms Property
Web Host for your WordPress Blog
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.
Click Here to Signup for BlueHost
Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

CSS3 Transitions
Use CSS3 transition property to change CSS values
More CSS3
Related Posts with Thumbnails
Admin/Author Admin/Author: Subrato Paul, owner of GoldenTwine Informatics founded in April 2003, lives in Kolkata, India. He is a freelance website designer, Internet marketer, social media enthusiast, and blogger. He writes in his blogs and as a guest writer about marketing and social media, eCommerce, website design and development, and his website.
RSSDid you like this article? If you're new to goldenTwine blog, you may want to
Subscribe to RSS feed: | Comments RSS | Email Subscription
Social Media:
Short Link: https://wp.me/pPMoR-q4 | Thanks for visiting!

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.