CSS3 2D Transforms
The CSS3 2D transform property you can rotate
, move
, skew
, and scale
elements.
It is an effect that changes the shape
, size
and position
of an element. Transforms are triggered on
events like mouse-hover or mouse-click.
Elements of 2D Transforms
The transformed element doesn't disturbs the elements surrounding it, it can overlap them. The element just take its own space specified
to it before the transformation.
There are many functions defined in CSS3 which are used to apply different kinds of transformation. Look at the functions below to understand how each of it
works with elments.
The translate() Function
Thus function can transform the element from its current position to a new position along the X and Y axis. This can be written as translate(x-axis px, y-axis px)
. The example will help you to understand the working of this property.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 translate() Method </title>
<meta charset="UTF-8">
<style>
.square {
background: #00aa9d;
border-radius: 3px;
height: 150px;
margin: 100px;
position: absolute;
transition: transform 0.8s;
width: 150px;
}
.square1 {
background: #2b3f53;
border-radius: 3px;
height: 150px;
margin: 100px;
transition: transform 0.8s;
position: absolute;
width: 150px;
}
.square1:hover {
transform: translate(20px, 20px);
}
</style>
</head>
<body>
<div class="square"></div>
<div class="square1"></div>
</body>
</html>
Output
The scale() Function
The scale()
function increases or decreases the size of the element according to the values given for the width and height
parameters in the function. This can be written as scale(2,0.5)
. The value 2 would transform the horizontal length to be 2
times its original size. The value 0.5 would transform the vertical length to be half its original size.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 scale() Method </title>
<meta charset="UTF-8">
<style>
.square {
background: green;
border-radius: 5px;
height: 100px;
margin:50px 50px;
transition: transform 3s;
width: 100px;
}
.square:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class='square'></div>
</body>
</html>
Output
Note :
You can use the shorthand property to scale both axis at the same time: transform: scale(2)
.
The rotate() Function
The rotate()
function rotates an element clockwise or anti-clockwise according to a given degree. It is written as rotate(deg)
.
A positive value, such as 60deg, will rotate the element 60deg clockwise, while a negative value, such as -60deg, will rotate the element 60deg anti-clockwise.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 rotate() Method </title>
<meta charset="UTF-8">
<style>
.droplet {
background: green;
border-radius: 2% 50%;
height: 100px;
margin: 100px;
transition: all 3s;
transition-timing: ease-in-out;
width: 100px;
}
.droplet:hover {
transform: rotate(1080deg);
}
</style>
</head>
<body>
<div class="droplet"></div>
</body>
</html>
Output
The skew() Function
The skew()
function skews the element along the X and Y axis by the specified angles. It is written as skew(x deg, y deg). If the 'y deg' is not specified, it has a zero value.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 skew() Method </title>
<meta charset="UTF-8">
<style>
.square {
background: #062984ad;
border-radius: 5px;
height: 150px;
margin: 100px;
transition: transform 1s;
width: 150px;
}
.square:hover {
transform: skewX(-20deg);
}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Output
The transform-origin Function
The transform-origin
function allows you to change the position of transformed elements. It allows you to specify the location origin of the transform. By default, the origin is in the center of the element.
For example, if you are using the rotate property but want it to rotate from top left corner and not from the center, you can use the value 0% 0% or left top. You can try manipulating the values, and see the changes it does in the result.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 2D transform-origin </title>
<meta charset="UTF-8">
<style>
.move {
background: purple;
border-radius: 5px 50%;
height: 100px;
margin: 150px auto;
transform-origin: left top;
transition: transform 3s;
width: 100px;
}
.move:hover {
transform: rotate(500deg);
}
</style>
</head>
<body>
<div class="move"></div>
</body>
</html>
Output