## The transform property

The transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. We manipulate an elements appearance using transform functions. The value of the transform property is a list of space-separated transform functions applied in the order provided. The transform functions include:

### translate()

The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.

transform: translate(15px, -15px);

### translateX()

The translateX(x) function is similar to the translate() function above, but only the left/right value is specified

transform: translatex(15px);

### translateY()

The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified

transform: translatey(-15px);

### scale()

The scale(w, h) property scales an element by w width and h height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function

transform: scale(1.5, 2);

### scaleX()

The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1)

transform: scalex(0.5);

### scaleY()

The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

transform: scaley(2);

### rotate()

The rotate(angle) function with rotate an element about the point of origin (described below) but the angle value specified.

transform: rotate(15deg)

### skew()

The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The values are angles: degrees, turns or grads.

transform: skew(15deg, 4deg);

### skewX()

The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0)

transform: skewx(15deg);

### skewY()

The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

transform: skewy(-6deg);

## Multiple transforms

The above show single transforms, but you can include more than one transform on an element. To include more than one transform, simply separate them the tranform functions with spaces.

.enlargen:hover { transform: translate(-50%, -50%) scale(2) rotate(0); }

The above makes the element twice and tall and twice as wide. By translating the element 50% up and to the left, the bottom right corner should remain in the exact same location. The rotate(0) removes any possible rotation on the element.

This ‘enlargen’ class may be something you would want to add to an image gallery, hilighting an image that is hovered by making it four times larget (twice as wide and twice as tall) and remove any tilt that might have been interesting as a thumbnail but tacky in full size.