With CSS3, you now have the capability to perform several transformations, in two-dimensional (2D) space, on document elements.
Using CSS 2D Transforms we can rotate, skew, scale, and translate HTML elements with the two major properties: transform and transform-origin.
The basic syntax for transform:
transform: transform function(value);
The transform functions applied to an HTML document
translate() | move elements left, right, up, or down |
scale() | scales an element by the defined factors horizontally and vertically |
rotate() | rotates an element around the point of origin |
skew() | skew along the X and Y axes |
Translation function is used to move elements left, right, up, or down. These functions are similar to the behaviour of position: relative; where you declare top and left.
Unlike position: relative, a translated element can only be moved relative to its current position.
The translate(x,y) function moves an element by x from the left, and y from the top:
-webkit-transform: translate(45px,-45px); -moz-transform: translate(45px,-45px); -ms-transform: translate(45px,-45px); -o-transform: translate(45px,-45px); transform: translate(45px,-45px);
If you only want to move an element vertically or horizontally, you can use the translatex or translatey functions:
/* Translate X - horizontally */ -webkit-transform: translatex(45px); -moz-transform: translatex(45px); -ms-transform: translatex(45px); -o-transform: translatex(45px); transform: translatex(45px); /* Translate Y - vertically */ -webkit-transform: translatey(-45px); -moz-transform: translatey(-45px); -ms-transform: translatey(-45px); -o-transform: translatey(-45px); transform: translatey(-45px);
An example to apply translate when h1 is hovered.
<h1>Put your <span>dukes</span> up sire</h1>
#ad3 h1:hover span {
color: #484848;
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-ms-transform: translateX(40px);
-o-transform:translateX(40px);
transform: translateX(40px);
}To make it work on webkit, since it only allow you to transform block-level elements; inline elements are off-limits. To fix it add display: inline-block; to our span:
#ad3 h1 span {
font-size: 30px;
color: #999999;
display:inline-block;
}The scale(x,y) function scales an element by the defined factors horizontally and vertically, respectively. If only one value is provided, it will be used for both the x and y scaling.
The syntax is as follows:
transform scale(X scale vector, Y scale vector).
You also can transform an element on only one axis by using the following syntax:
transform:scaleX(X scale factor); transform:scaleY(Y scale factor);
#element{
transform: scale(2,4);
}This causes the targeted element to appear twice as long in the X axis and four times as long on the Y axis.
#element{
transform: scaleX(2);
}This causes the targeted element to appear twice as long in the X axis but won’t change its size along the Y axis.
-webkit-transform: scale(1.5,0.25); -moz-transform: scale(1.5,0.25); -ms-transform: scale(1.5,0.25); -o-transform: scale(1.5,0.25); transform: scale(1.5,0.25);
As with translate, you can also use the scalex(x) or scaley(y) functions. These functions will scale only the horizontal dimensions, or only the vertical dimensions. They are the same as scale(x,1) and scale(1,y), respectively.
By default a scaled element will grow outwards from or shrink inwards towards its center; so the element’s center will stay in the same place as its dimensions change. To change this default behavior, you can include the transform-origin property.
<h1>Put your <span>dukes</span> up sire</h1>
#ad3 h1:hover span {
color: #484848;
-webkit-transform: translateX(40px) scale(1.5);
-moz-transform: translateX(40px) scale(1.5);
-ms-transform: translateX(40px) scale(1.5);
-o-transform: translateX(40px) scale(1.5);
transform: translateX(40px) scale(1.5);
}The rotate() function rotates an element around the point of origin (as with scale, by default this is the element’s center), by a specified angle value.
Generally, angles are declared in degrees, with positive degrees moving clockwise and negative moving counter-clockwise. We can also provide angles in grads, radians, or turns.
The syntax is as follows:
transform:rotate(angle).
An example using rotate.
#ad3 h1:hover span {
color: #484848;
-webkit-transform:rotate(10deg) translateX(40px) scale(1.5);
-moz-transform:rotate(10deg) translateX(40px) scale(1.5);
-ms-transform:rotate(10deg) translateX(40px) scale(1.5);
-o-transform:rotate(10deg) translateX(40px) scale(1.5);
transform:rotate(10deg) translateX(40px) scale(1.5);
}The skew(x,y) function specifies a skew along the X and Y axes.
The x specifies the skew on the X axis, and the y specifies the skew on the Y axis. If the second parameter is omitted, the skew will only occur on the X axis:
The syntax for Skewing an element: This defines a 2D skew transformation along the X axis and the Y axis.
skew(x-angle,y-angle)
skewX(angle) | This defines a 2D skew transformation along the X axis. |
skewY(angle) | This defines a 2D skew transformation along the Y axis |
-webkit-transform: skew(15deg, 4deg); -moz-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); -o-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);
Every element is positioned in a 2D coordinate space, and they each have an origin point. You can move this origin when performing any transformation by using the transform-origin property. The coordinates of this point are based on a regular 2D coordinate system: a vertical Y axis, a horizontal X axis, and an initial transform-origin value of 50% 50 %, which is the center of the element.
The transform-origin property takes two parameters: the X-axis coordinate value and the Y-axis coordinate value. It accepts the following two types of values (and if only one parameter is given, it assumes the second one is the center):
-Numeric (expressed in pixels or percentages): A value pair of 100% 100% places the transform origin in the bottom right corner. -Keywords: The keywords you can use are top, bottom, center, left, and right. A value pair of right bottom, for instance, places the transform-origin in the bottom right corner (just like a value pair of 100% 100 %).
The default value can be then expressed like this: (50 %,50 %) or (center,center).
The transform-origin property is supported with vendor prefixes in WebKit, Firefox, and Opera.
-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;
The default transform-origin is the center of the circle, applying a rotate transform to a circle would have no visible effect—a circle rotated 90 degrees still looks exactly the same as it did before being rotated. If you gave your circle a transform-origin of 10% 10%, you would notice the circle’s rotation.
