Transform - Rotate

The number for your rotation can either be stated in positive or negative degrees:

Images One

.rotateOne{
transform: rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}

Transition - Timing Function

ease:

start slow, then gets fast, ends slow

ease-in:

slow start

ease-out:

slow end

ease-in-out:

slow start, slow end

cubic-bezier:

four points of the curve are specified (x1, y1, x2, y2). Values 0-1

Transition - Duration

The length of time the of the transition
ms - milliseconds
s- seconds

 

All of the following examples will only state transform but you will need to include all of the vendor code for the various browsers.

Transform - Rotate Origin

The default origin of the transform is the center of the element. If you want to change this you need to add an origin position which could be any of the following:
top left
top right
bottom left
bottom right

Images Two

.rotateTwo{
transform:rotate(5deg);
transform-origin: top right;
}
This does not appear to make much of a difference but it does move it to the right a bit and the angle is slightly different.

Transform - Rotate Translate

With Translate you can move the element from its original position, using the x and y coordinates. The code is:

Image Three

.rotateThree{
transform:rotate(5deg)translate(25px, 25px);
}

Translation will work with any of the other functions. You are going to find that you will probably want to move a rotated or skewed element from its original position because once either of these functions have been applied to an object it will take up a different position on the page which may not work well. Also if you use Translation to reposition an element (instead of margins or position) it will not effect the element in older browsers that do not read Transform.

Transform - Rotate Text

Text One

.rotateText{
transform:(-5deg);
}
Rotated text does not display well in Firefox. At the moment I am viewing in Firefox version 3.6.13, hopefully this will improve in later versions.

Transform - Skew

The element is skewed from its x and y coordinates

Images Four

.skewFour{
transform: skew(2deg, 20deg);
}

Transform - Scale

Images Five

The larger image does not have is not associated with any css
The following code is on hover of the smaller image

.scale{
transform: scale(2.0);
}

#name:hover{

transform:scale(2);
transition-timing-function: ease-out;
transition-duration: 500ms;
}

Transform - Matrix

Matrix brings all the numbers together. This is a lot more complicated than it sounds, so I am not going to get into it at the moment. Here is the link to Matrix on W3C if you want to experiment.