Any html object can be transformed by applying one or more of several transforms, relative to a point.
The tranform origin is by default right in the center of the object. But it can be offset to create totally different results.
//Perform transformation relative to origin at Top Left: tranform-origin: 0%,0%; -ms- -webkit- -o-
transform: none; //apply no transformation (removing any existing ones) //Matrix: transform: matrix(n,n,n,n,n,n); //Defines a 2D transformation, using a matrix of six values transform: transform: (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) // Defines a 3D transformation, using a 4x4 matrix of 16 values //Translations: transform: translate(x,y) transform: translate3d(x,y,z) transform: translateX(x) transform: translateY(y) Defines a translation, using only the value for the Y-axis transform: translateZ(z) Defines a 3D translation, using only the value for the Z-axis //Scale: transform: scale(x,y); transform: scale3d(x,y,z); transform: scaleX(x); transform: scaleY(y); transform: scaleZ(z); //Rotations: transform: rotate(angle); transform: rotate3d(x,y,z,angle) transform: rotateX(angle); transform: rotateY(angle); transform: rotateZ(angle); //Skew: transform: skew(x-angle,y-angle) transform: skewX(angle) transform: skewY(angle) transform: perspective(n)