Playing with 2D Transforms

Transform property allows you to manipulate an element. Elements can be translated, scaled, skewed, rotated.

Scale: scale(x,y), scaleY(y) or scaleX(x)

.yourScaleElement {
 width: 20px;
 height: 20px;
 background-color:blue;
 boder:1px solid black;
 transform: scale(.5,.5); //scale element
}

 

Skew: skew(x-angle, y-angle),skewY(y-angle), skewX(x-angle)

.yourSkewElement{
 width: 200px;
 height: 100px;
 background-color: red;
 border: 1px solid black;
 transform: skewX(20deg);
}

 

Rotate: rotate(angle), rotateX(angle), rotateY(angle)

.yourRotateElement{
 width: 100px;
 height: 100px;
 background-color: red;
 border: 1px solid black;
 transform: rotate(20deg);
}

 

 

Translate: translate(x,y), translateX(x), translate(y)

.yourRotateElement{
 width: 100px;
 height: 100px;
 background-color: red;
 border: 1px solid black;
 transform: translateY(50px);
} 

 

Multiple values

.yourElement{
 width: 200px;
 height: 100px;
 background-color: red;
 border: 1px solid black;
transform: rotate(90deg) translateY(-20px) scale(0.5, 0.5);
}

 

Browser support

You have to add the vendor prefixes:

.transform{
 -webkit-transform: translateY(-20px) scale(0.5, 0.5); //Safari and chrome
-moz-transform: translateY(-20px) scale(0.5, 0.5);//firefox
-ms-transform: translateY(-20px) scale(0.5, 0.5); //IE
transform: translateY(-20px) scale(0.5, 0.5);
}

 

Find the live examlples: http://codepen.io/roladh/