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
transformproperty 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: