Did you find this useful?
Socialize it today.


CSS3 2D Transforms

Tuesday, November 27, 2012

browser

CSS3 transforms allow web developers to take just about any element in an HTML document, and rotate, translate, skew, and scale it, all while not changing its effect on the page layout. CSS3 provides both 2D and 3D transforms. However, while 2D transforms are supported in all modern browsers, 3D transforms are currently only supported in Safari, Chrome and Internet Explorer version 10. In this article, we will take a closer look at how to use 2D transforms.


How do Transforms Work?

At a high level, a transform is an effect that lets an element change its shape, size and position. We will take a look at some examples to get a better idea of how these transforms work.


Transform Property

The transform property accepts for its value, one or more transform functions. These transform functions specify a transformation. Functions take the form of a function name, with a value inside of a set of parenthesis.


Browser Support

At the time of this writing, the transform property is not supported by any browser. However, vendor-prefixes are currently supported.


BrowserVendor Prefix
Internet Explorer 9+-ms-transform
Firefox-moz-transform
Opera-o-transform
Safari-webkit-transform
Chrome-webkit-transform


Your browser may support CSS3 2D Transforms.

Syntax

The transform property takes transform functions as its value. The default value is none.

transform: none|transform-functions


Transform FunctionDescription
matrix(n,n,n,n,n,n)2D transformation, using a matrix of six values
rotate(angle)2D rotation, the angle is specified in the parameter
scale(x,y)2D scale transformation, changing the elements width and height
scaleX(n)2D scale transformation, changing the element's width
scaleY(n)2D scale transformation, changing the element's height
skew(x-angle,y-angle)2D skew transformation along the X- and the Y-axis
skewX(angle)2D skew transformation along the X-axis
skewY(angle)2D skew transformation along the Y-axis
translate(x,y)2D translation, moving the element along the X- and the Y-axis
translateX(n)2D translation, moving the element along the X-axis
translateY(n)2D translation, moving the element along the Y-axis


translate() function

With the translate() function, the element moves from its current position to a new position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position. If you only want to translate along the X-axis, you can use the translateX() function. If you only want to translate along the Y-axis, use the translateY() function.


<!DOCTYPE html>
<html>
<head>
<style> 

.group {
width:200px;
height:200px;
position:absolute;
border:1px solid black;
padding:10px;
}

.original {
background-color:#EFEFEF;
}

#target {
background-color:#FFAA00;
-ms-transform:translate(100px,100px); 
-moz-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
transform:translate(100px,100px);
}
</style>
</head>
<body>

<div class="original group" id="original">Original</div>
<div class="group" id="target">Transform</div>

</body>
</html>


Original
Translate


rotate() function

With the rotate() function, we can rotate and element clockwise or counter-clockwise at a given degree. A positive value rotates the element clockwise. A negative element rotates the element counter-clockwise.


#target {
background-color:#FFAA00;
-ms-transform:rotate(45deg); 
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}


Original
Rotate


scale() function

The scale() function increases or decreases the size of the target element depending on the parameters given for the width (X-axis) and the height (Y-axis). If you only want to scale on the X-axis, use the scaleX() function. If you only want to scale the on Y-axis, use the scaleY() function. The numeric value provided will scale it that number of times.


#target {
background-color:#FFAA00;
-ms-transform:scale(1.5,1.5); 
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
-o-transform:scale(1.5,1.5);
transform:scale(1.5,1.5);
}


Original
Scale


skew() function

The skew() function turns an element in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines. If you only want to skew on the X axis, use the skewX() function. If you only want to skew on the Y axis, use the skewY() function.


#target {
background-color:#FFAA00;
-ms-transform:skew(30deg,20deg); 
-moz-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}


Original
Skew


matrix() function

While it is unlikely that you will ever need to use the matrix function, underneath all these functions is the core of CSS transformations which is based on the mathematical concept of a transformation matrix. Each of the functions we have covered so far can be represented by a matrix value. You can visit the W3C site for detailed information about the transformation matrix. In the following example, we will rotate a div element 30 degrees, using the matrix function.


#target {
background-color:#FFAA00;
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}


Original
Matrix


transform-origin Property

The transform-origin property allows you to change the position on the transformed element. A element with a 2D transformed property can change the x-axis and y-axis of the element. In other words, the transform-origin property sets an element's base placement. For 3D transforms, it can change the z-axis as well.


transform-origin: x-axis y-axis z-axis;


The x-axis and y-axis values can be supplied as left, center, right, [length], or [percentage]. Here is an example.


#target {
background-color:#FFAA00;
-ms-transform: rotate(45deg);
-ms-transform-origin:25px 30px; 
-webkit-transform: rotate(45deg);
-webkit-transform-origin:25px 30px;
-moz-transform: rotate(45deg);
-moz-transform-origin:25px 30px;
-o-transform: rotate(45deg);
-o-transform-origin:25px 30px;
transform: rotate(45deg);
transform-origin:25px 30px;
}


Original
Rotate
Transform-Origin

In this previous example, you can compare the element that has only been rotated, vs. an element that has been rotated and has had the transform-origin property applied. As you can see, the transform-origin has changed the position of the element on its x-axis as well as its y-axis.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Sergeys HTML5 CSS3 The Book of CSS3 HTML CSS and JavaScript