Header Ads Widget

How to transform HTML element using CSS?

My codding spot September 18, 2021

 CSS provides many styles to formatting HTML elements. In this post we will discussed about the transform property of CSS.

What is transform in CSS?

The transform property in CSS allows you to rotate, scale, skew and  translate a HTML element.

CSS provides 2D transform and 3D transform.

CSS 2D transform methods

Following 2D transform methods are used with transform property.

  • rotate()
  • translate ()
  • scale ()
  • scale X()
  • scale Y()
  • skew ()
  • skew X()
  • skew Y()
  • matrix()

1. rotate ()

• The rotate() method rotate the HTML element clockwise or anti-clockwise according to specified degree.
• Positive value rotates an element clockwise and negative value rotates element anti-clockwise.

Example
In following example <div> element rotates at 120 degree clockwise.

<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
.original{
height:200px;
width:200px;
margin:100px;
background-color:#aaa;
}
.rotat{
height:200px;
width:200px;
background-color:#a02;
transform:rotate(120deg);
}
</style>
</head>
<body>
<div class="original">
<div class="rotat">rotate 120 degree</div>
</div>
</body>
</html>

Output:-
2d transform rotate() (clockwise)
2d transform rotate() (clockwise )

Following code rotate <div> element -120 degree anticlockwise.


.rotat{
height:200px;
width:200px;
background-color:#a02;
transform:rotate(-120deg);
}

Output:-
2d transform rotate() (anticlockwise)
2d transform rotate() (anticlockwise)

2. translate()

• translate() method moves an element from it’s original position according to value specified in X-axis and Y-axis.
• Positive value moves an element to right and bottom. Negative value moves an element left and right.
         Example
         Following example moves <div> element 50px right and 70px down.


<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
.original{
height:200px;
width:200px;
margin:100px;
background-color:#aaa;
}
.translt{
height:200px;
width:200px;
background-color:#a02;
transform:translate(50px,70px);
}
</style>
</head>
<body>
<div class="original">
<div class="translt">translate</div>
</div>
</body>
</html>

Output:-
2d transform translate() - positive value
2d transform translate() - positive value

Following example moves <div>  element 50px left and 70px top.

.translt{
height:200px;
width:200px;
background-color:#a02;
transform:translate(-50px,-70px);
}

Output:-
2d transform translate () (negative value)
2d transform translate () (negative value)

3. scale()

The scale () method increase and decrease the height and width of an element.

Example
The <div> element height and width is 1.5 times larger than its original size.


<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
.original{
height:200px;
width:200px;
margin:100px;
background-color:#aaa;
}
.scale{
height:200px;
width:200px;
background-color:#a02;
transform:scale(1.5);
opacity:0.7;
}
</style>
</head>
<body>
<div class="original">
<div class="scale">Scale</div>
</div>
</body>
</html>

Output:-
2d transform scale()
2d transform scale()

In example height and width of an element is (0.5 times smaller than) half of its original size.


.scale{
height:200px;
width:200px;
background-color:#a02;
transform:scale(0.5);
opacity:0.7;
}

Output:-
2d transform scale(0.5)
2d transform scale(0.5)

4. scaleX()

The scaleX() method increase and decrease width of an element. 

Example
Width of <div> element increase to 1.5.


.scale{
height:200px;
width:200px;
background-color:#a02;
transform:scaleX(1.5);
opacity:0.7;
}

Output:-
2d transform scaleX (1.5)
2d transform scaleX ()

5. scaleY()

The scaleY() method increase and decrease height of an element. 

Example
Height of <div> element increase to 1.5.


.scale{
height:200px;
width:200px;
background-color:#a02;
transform:scaleY(1.5);
opacity:0.7;
}

Output:-
2d transform ScaleY (1.5)
2d transform ScaleY ()

Note:- value 1 specify no changes in height and width.

6. skew()

The skew() method skews an element according to specified degree of X-axis and Y-axis.

Example
Following example skews <div> element at 30 degree along X-axis and Y-axis


<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
.original{
height:200px;
width:200px;
margin:100px;
background-color:#aaa;
}
.skew{
height:200px;
width:200px;
background-color:#a02;
transform:skew(30deg);
}
</style>
</head>
<body>
<div class="original">
<div class="skew">skew</div>
</div>
</body>
</html>

Output:-
2d transform Skew (30deg)
2d transform Skew()

7. skewX()

skewX () method skews an element according to degree of X-axis.

Example
The <div> element skews at 30 degree along X-axis.


.skew{
height:200px;
width:200px;
background-color:#a02;
transform:skewX(30deg);
}

Output:-
2d transform skewX (30deg)
2d transform skewX()

8. skewY()

skewY () method skews an element according to degree of Y-axis.

Example
The <div> element skews at 30 degree along Y-axis.

.skew{
height:200px;
width:200px;
background-color:#a02;
transform:skewY(30deg);
}

Output:-
2d transform skewY (30deg)
2d transform skewY()

9. matrix()

The matrix () method combines 2d transform methods together. It takes six parameters.
matrix(scaleX(),skewY(),skewX(), scaleY(), translateX(), translateY());

Example
Following example scales, skews and translate the <div> element.


<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
.original{
height:200px;
width:200px;
margin:100px;
background-color:#aaa;
}
.matrix{
height:200px;
width:200px;
background-color:#a02;
transform:matrix(0.5,1.5,1,0.5,20,30);
}
</style>
</head>
<body>
<div class="original">
<div class="matrix">matrix()</div>
</div>
</body>
</html>

Output:-
2d transform matrix()
2d transform matrix()

CSS 3D transform methods

Following are the 3D transform methods

• rotateX()

Rotates element around X-axis according to specified degree.

Example
An element rotated at 45 degree around X-axis.


<!DOCTYPE html>
<html>
<head>
<title>3D transform</title>
<style>
.original{
height:200px;
width:200px;
background-color:#ccc;
margin:100px;
}
.rotat3{
height:200px;
width:200px;
background-color:#aaf;
transform:rotateX(145deg);
}
</style>
</head>
<body>
<div class="original">
<div class="rotat3">Rotate</div>
</div>
</body>
</html>

Output:-



3d transform rotateX (146deg)
3d transform rotateX()

• rotateY()

Rotates an element around Y-axis according to specified degree.

Example
Element rotated at 145 degree around Y-axis.

.rotat3{
height:200px;
width:200px;
background-color:#aaf;
transform:rotateY(145deg);
}

Output:-
3d transform rotateY (145deg)
3d transform rotateY()

• rotateZ()

Rotates an element around Z-axis according to specified degree.

Example
Element rotated at 145 degree on Z-axis.


.rotat3{
height:200px;
width:200px;
background-color:#aaf;
transform:rotateZ(145deg);
}

Output:-
3d transform rotateZ (145deg)
3d transform rotateZ()

3D transform functions

• rotate3d()

rotate3d() function defines 3D rotation of an element at specified angle around 3 axis (X-axis, Y-axis, Z-axis). It can be specified as rotate3d(x, y, z, angle).
You can also specify negative value.

Example
In example element rotated at 150 degree angle around X-axis, Y-axis, Z-axis.

.rotat3{
height:200px;
width:200px;
background-color:#aaf;
transform:rotate3d(1,2,1,150deg);
}

Output:-
rotate3d (1,21,150deg)
rotate3d()

• translate3d()

translate3d() function moves an element to right, left, top and bottom from its current position around X-axis Y-axis Z-axis. It can be written as translate3d(x, y, z).

Example
The <div> element moves towards 30px along X-axis, 50px along Y-axis and 80px along Z-axis. Negative value moves an element opposite direction.


<!DOCTYPE html>
<html>
<head>
<title>3D transform</title>
<style>
.original{
height:200px;
width:200px;
background-color:#ccc;
margin:100px;
}
.translt3{
height:200px;
width:200px;
background-color:#aaf;
transform:translate3d(30px,50px,80px);
}
</style>
</head>
<body>
<div class="original">
<div class="translt3">Translate</div></div>
</div>
</body>
</html>

Output:-
translate3d(30px,50px,80px)
translate3d()

• scale3d()

scale3d() function increase and decrease the height and width of an element. It can be specified as scale3d(x,y,z).

Example
Following example increase width 1.5 and decrease height 0.5. There is no 3d effect.


<!DOCTYPE html>
<html>
<head>
<title>3D transform</title>
<style>
.original{
height:200px;
width:200px;
background-color:#ccc;
margin:100px;
}
.scal{
height:200px;
width:200px;
background-color:#aaf;
transform:scale3d(1.5,0.5,1);
}
</style>
</head>
<body>
<div class="original">
<div class="scal">Scale</div>
</div>
</body>
</html>

Output:-
scale3d(1.5,0.5,1)
scale3d()

The perspective property

To visualize 3d effect use scale3d() function with rotate3d() function and perspective property.
The perspective property specifies how 3d elements are viewed.

Example
Following example scale and rotate <div> element according to specified values and perspective.


<!DOCTYPE html>
<html>
<head>
<title>3D transform</title>
<style>
.original{
height:200px;
width:200px;
background-color:#ccc;
margin:100px;
perspective:300px;
}
.scal{
height:200px;
width:200px;
background-color:#aaf;
transform:scale3d(1.5,0.5,1) rotate3d(2,2,1,150deg);
}
</style>
</head>
<body>
<div class="original">
<div class="scal">Scale</div>
</div>
</body>
</html>

Output:-
Transform with perspective property
Transform with perspective property 

Here another example using perspective property with rotateX()


.original{
height:200px;
width:200px;
background-color:#ccc;
margin:100px;
perspective:300px;
}
.rotat3{
height:200px;
width:200px;
background-color:#aaf;
transform:rotateX(45deg);
}

Output:-
rotateX() with perspective property
rotateX() with perspective property

• matrix3d()

matrix3d() function performs all 3d transformation (rotate, scale and translate) at once. It takes 16 parameters in 4x4 matrix. In matrix you have to specify numbers.

Following example rotate, scale and translate an element by matrix3d().


<!DOCTYPE html>
<html>
<head>
<title>3D transform</title>
<style>
.original{
height:200px;
width:200px;
background-color:#ccc;
margin:100px;
perspective:300px;
}
.mat{
height:200px;
width:200px;
background-color:#aaf;
transform:matrix3d(0.5, 0.5, 0.4, 0, -0.8, 0.2, 0.1, 0, 0.3, 0, 0.9, 0, 0, 0, 0, 1);
}
</style>
</head>
<body>
<div class="original">
<div class="mat">transform matrix3d()</div>
</div>
</body>
</html>

Output:-
3d transform matrix3d ()
3d transform matrix3d ()
Conclusion

Using CSS transform property you can transform an element in 2 dimension or 3 dimension. One thing to notice that the perspective property gives deep 3d effect.

 The difference between 2D transform and 3D transform is: 2D transform work on X-axis and Y-axis, while 3D transform work on X-axis Y-axis and Z-axis.

X-axis and Y-axis specifies width and height. Z-axis specifies depth.


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments