dylanmcleod
5/24/2015 - 11:58 PM

CSS Transforms

CSS Transforms

/* Translate - Moves an element sideways or up and down. (Up & Down/Left & Right) */

.translate {
    -webkit-transform: translate(0,350px);
     -ms-transform: translate(0,350px);
     transform: translate(0,350px);
}

/* Scale - Affects the size of the element */

.scale {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* Rotate - Rotates clockwise from current position.  */

.rotate {
	-webkit-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
}

/* Skew - Tilts an element one way or another. Like turning a rectangle into a parallelogram. */

.skew {
	-webkit-transform: skewY(25deg)
	-ms-transform: skewY(25deg)
	transform: skewY(25deg);
}