CSS - 2D Transforms

Previous
Quiz

CSS transforms are used to modify the element's shape and sizes and are responsible for movements of elements in two-dimensional space using functions like translate(), scale(), rotate(), and skew(). These functions allow you to move, scale, rotate, and skew elements along the X and Y axes, creating various visual effects and manipulations.

2D Transform
3D Transform

Table of Contents


 

CSS 2D Translate

CSS translate() function moves an element along the X and Y axes.

Example

The following example shows a box that moves along these axes when hovered over.

 <!DOCTYPE html> <html lang="en"> <head> <style> body { height: 300px; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: Arial, sans-serif; } /* The Box Element */ .box { width: 200px; height: 200px; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5em; border-radius: 10px; /* Initial 2D Translation */ transform: translate(50px, 50px); transition: transform 0.6s ease; } /* Hover State with Different 2D Translation */ .box:hover { transform: translate(-50px, -50px); background-color: #2ecc71; cursor: pointer; } </style> </head> <body> <div class="box"> 2D Box </div> </body> </html>

CSS 2D Rotate

CSS rotate() function rotates an element around a specified point on the 2D plane.

Example

The following example shows a box that rotates when hovered over, creating a dynamic effect.

 <!DOCTYPE html> <html lang="en"> <head> <style> body { height: 300px; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: Arial, sans-serif; } /* The Box Element */ .box { width: 200px; height: 200px; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5em; border-radius: 10px; /* Initial 2D Rotation */ transform: rotate(15deg); transition: transform 0.6s ease; } /* Hover State with Different 2D Rotation */ .box:hover { transform: rotate(-15deg); background-color: #2ecc71; cursor: pointer; } </style> </head> <body> <div class="box"> 2D Box </div> </body> </html>

CSS 2D Scale

CSS scale() function scales an element along the X and Y axes.

Example

The following example shows a box that scales up and down when hovered over, creating a zoom effect.

 <!DOCTYPE html> <html lang="en"> <head> <style> body { height: 300px; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: Arial, sans-serif; } /* The Box Element */ .box { width: 150px; height: 150px; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5em; border-radius: 10px; /* Initial 2D Scaling */ transform: scale(1); transition: transform 0.6s ease; } /* Hover State with Different 2D Scaling */ .box:hover { transform: scale(1.5); background-color: #2ecc71; cursor: pointer; } </style> </head> <body> <div class="box"> 2D Box </div> </body> </html>

CSS 2D Skew

CSS skew() function skews an element along the X and Y axes.

Example

The following example shows a box that skews when hovered over, creating a slanted effect.

 <!DOCTYPE html> <html lang="en"> <head> <style> body { height: 300px; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: Arial, sans-serif; } /* The Box Element */ .box { width: 200px; height: 200px; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5em; border-radius: 10px; /* Initial 2D Skew */ transform: skewX(10deg) skewY(10deg); transition: transform 0.6s ease; } /* Hover State with Different 2D Skew */ .box:hover { transform: skewX(-10deg) skewY(-10deg); background-color: #2ecc71; cursor: pointer; } </style> </head> <body> <div class="box"> 2D Box </div> </body> </html>

The following table lists all the various functions that are used to transform elements in the two-dimensional space.

Function Description Example
translate() CSS translate() function translates an element along the X and Y axes.
rotate() CSS rotate() function rotates an element around a point in 2D space.
scale() CSS scale() function scales an element along the X and Y axes.
skew() CSS skew() function skews an element along the X and Y axes.
transform() CSS transform() function applies a 2D or 3D transformation to an element.
Print Page
Previous
Next
Advertisements