in

CSS 2D TRANSFORM | Transform Element In Two Dimension Using CSS

In this tutorial we will be discussing about CSS 2D TRANSFORM which entails how to transform elements into two dimensional elements.  In our previous tutorial we looked at CSS BORDER IMAGES which involved how to add border images to HTML web documents. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS BORDER IMAGES | Add images to Element Borders Using CSS

CSS 2D TRANSFORM

CSS allows developers to transform images to two dimensions or three dimensions but in this tutorial we will be limited to only two dimensions. CSS 2D transform is used to change the element structure as either rotate, skew, translate and scale. The below properties are used to carry out 2d transformation on elements

  • translate(x,y) : use to transform the element in the x and y-axis
  • translateX(n): use to transform the element in the x-axis
  • translateY(n): use to transform the element in the y-axis
  • skew(x,y): use to skew the element in the x and y-axis
  • skewX(n): use to skew the element in the x-axis
  • skewY(n): use to skew the element in the y-axis
  • scale(x,y): use to scale the element in the x and y-axis
  • scaleX(n): use to scale the element in the x-axis
  • scaleY(n): use to scale the element in the y-axis
  • rotate(angle): use to rotate the element at any angle
  • matrix(n,n,n,n,n,n): use to specify matrix transformation with 6 values

Rotate Element by 40deg

The illustration below shows how to transform an element by rotating it by 40 degrees

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .image_trans{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 100px; left: 100px;
         transform: rotate(40deg);
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
      .image_trans2{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 230px; left: 100px;
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
   </style>
   
   <title>ILLUSTRATION OF 2D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

Result

CSS 2D TRANSFORM

Rotate Element -40 degrees

The below illustration shows how to rotate an element by -40 degrees anticlockwise

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .image_trans{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 100px; left: 100px;
         transform: rotate(-40deg);
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
      .image_trans2{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 230px; left: 100px;
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
   </style>
   
   <title>ILLUSTRATION OF 2D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 2D TRANSFORM

Skew X-axis

The below example shows how to skew element along the x-axis

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .image_trans{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 100px; left: 100px;
         transform: skewX(20deg);
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
      .image_trans2{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 230px; left: 100px;
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
   </style>
   
   <title>ILLUSTRATION OF 2D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 2D TRANSFORM

Skew Y-axis

The below example shows how to skew element along the Y-axis

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .image_trans{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 100px; left: 100px;
         transform: skewY(20deg);
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
      .image_trans2{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 230px; left: 100px;
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
   </style>
   
   <title>ILLUSTRATION OF 2D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 2D TRANSFORM

Matrix Transform

Illustration of Box rotation using Matrix transformation is shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .image_trans{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 100px; left: 100px;
         transform: matrix(1, -0.8, 0, 1, 0, 0); 
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
      .image_trans2{
         background-color: red;
         border: solid 2px;
         width: 300px;
         height: 100px;
         position: absolute; top: 230px; left: 100px;
         text-align: center;
         text-decoration: azure;
         font-size: xx-large;
         color: azure;
      }
   </style>
   
   <title>ILLUSTRATION OF 2D TRANSFORM MATRIX PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 2D TRANSFORM

CONCLUSION

Will this short tutorial we hope you are able to make use of CSS 2D transform properties to alter element structures on your web page. Lets move on to the next tutorial on CSS 3D TRANSFORM

What do you think?

css border images

CSS BORDER IMAGES | Add images to Element Borders Using CSS

css 3d transform

CSS 3D TRANSFORM | Transform Element In 3D Using CSS