# IT:AD:CSS/Transforms #
* [[../|(UP)]]
{{indexmenu>.#2|nsort tsort}}
Any html object can be transformed by applying one or more of several transforms, relative to a point.
## Notes ##
### Transform Origin ###
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-
### Transforms ###
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)
## Resources ##
* http://www.w3schools.com/cssref/css3_pr_transform.asp
* http://learn.shayhowe.com/advanced-html-css/css-transforms
###### Shared CSS