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

CSS3 translate() Method

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

CSS3 scale() Method

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

CSS3 rotate() Method

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

CSS3 skew() Method

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

CSS3 2D transform-origin











Follow Us: