In this advanced CSS tutorial, we will be going to cover the 2-D transform properties and its values. By the end of this CSS tutorial, you will be able to create 2-D effects on a specified element.
CSS 2D Transforms
In CSS, we have a property called
transform
, which allows us to move, scale, rotate, and skew specific elements. <Note> Old versions of browsers do not support the transform property, make sure that you have the latest version of your browser.
Transform values or methods
The transform value can accept 9 values which are also known as transform methods
-
translate()
-
rotate()
-
scale()
-
scaleX()
-
scaleY()
-
skew()
-
skewX()
-
skewY()
-
matrix()
CSS Transform Property translate() method
The
translate()
method can shift an element from its actual position, it accepts two parameters which represent the x-axis and y-axis.
Syntax
{transform:translate(x-axis, y-axis)}
Example let’s move a <div> element 60px to the right and 110px to down from its current position
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; transform: translate(60px, 110px); } </style> </head> <body> <div>Moved Box</div> </body> </html>
CSS Transform Property rotate() Method
The
rotate()
method rotates the element box with a specified angle. It accepts a degree value as a parameter. If the degree value is positive the box rotates clockwise, if the degree value is negative the box rotates anti-clock wise.
Syntax
{transform: rotate(deg)}
Example Rotate an element box 45deg
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; transform: rotate(45deg); } </style> </head> <body> <div>Rotated Box</div> </body> </html>
Transform property scale method
As the name suggests, the
scale()
method can increase and decreases the dimensions of the element box. It accepts two values as parameter
scale(x, y)
, then it increases the box width by x times and box height by y times. If the values are smaller than 1, then it decreases the size of the box.
Syntax
{transform: scale(x,y);}
Example Let’s scale the size of by increasing its width 2 time and height 4 times
<!DOCTYPE html <html> <head> <style> div{ margin:70px; width: 100px; height:25px; background-color: red; border: 2px solid black; transform: scale(2,4); } </style> </head> <body> <div>Scaled Box</div> </body> </html>
CSS transform property scaleX method
The
scaleX()
method is used to increase and decrease the width of an element box, it is a sub-value of scale() which only deals with width length.
Syntax
{transform: scaleX(width-scale);}
Example let’s half the element box width.
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; transform: scaleX(0.5); } </style> </head> <body> <div>Scaled Box width</div> </body> </html>
CSS Transform Property scaleY method
The
scaleY()
method is used to increase and decrease the height of an element.
Syntax:
{ transform: scaleY(scaled-height);}
Example Decrease the size of the element box when the user hovers over the element.
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; } div:hover{ transform: scaleY(0.5); } </style> </head> <body> <div>Hover Over Me</div> </body> </html>
CSS transform property skew() method
The
skew()
method accepts two degree parameters for X-axis and Y-axis, and slant or skew the element box according to the specified degree.
Syntax
{ transform: skew(x-degree, y-degree); }
Example let’s skew an element box 20degree to the x-axis and 40degeree to the y-axis when the user hovers over the element.
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; } div:hover{ transform: skew(20deg, 40deg); } </style> </head> <body> <div>Hover Over Me</div> </body> </html>
Transform property skewX method
The
skewX()
method skews the element box along the specified X angle.
Example skew the element box 20 degree along x-axis when the user hovers over the element.
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; } div:hover{ transform: skew(20deg, 40deg); } </style> </head> <body> <div>Hover Over Me</div> </body> </html>
Transform Property skewY method
The
skewY()
method skews the element box along the specified angle of Y-degree.
Example skew the element box 40 degrees along Y-axis when the user hovers over the element.
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; } div:hover{ transform: skewY(40deg); } </style> </head> <body> <div>Hover Over Me</div> </body> </html>
CSS transform Matrix method
The
matrix()
method is a shorthand value for all the above transform methods. Using this single method we can rotate, translate, scale, and skew an element box.
Syntax
{transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())}
Example
<!DOCTYPE html> <html> <head> <style> div{ width: 100px; height:100px; background-color: red; border: 2px solid black; } div:hover{ transform: matrix(1, -0.3, 0, 1, 0, 2); } </style> </head> <body> <div>Hover Over Me</div> </body> </html>
Summary
-
The
transform
property allows us to provide an effect on the element as a 2D object. - It accepts 9 values which are known as transform methods.
-
translate(x,y)
method moves the element along the x and y-axis from its actual position. -
scale(x,y)
method scales the element width by x times and height by y times. -
rotate(a)
method rotates the element box with the angle a. -
skew(x,y)
slant the element box along the x-axis and y-axis -
matrix(a,b,c,d,e,f)
is a shorthand method for all the other transform values.
People are also reading: