fbpx
April 6, 2020
css 3d transform
CSS

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

In this tutorial we are going to discuss about CSS 3D TRANSFORM which entails how to transform the structure of element in three dimension. In our previous tutorial we discussed about CSS 2D TRANSFORM which involved transforming the shape and structure of element into two dimension and we looked at different examples related to 2D transformations. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS 2D TRANSFORM | Transform Element In Two Dimension Using CSS

CSS 3D TRANSFORM

Transformation in CSS can be not only in two dimension as discussed earlier but also in three dimension. The difference between both dimensions is the inclusion of the z-axis in the three dimension.

The below properties are used to carry out 3D transformation on elements

  • translate3d(x,y,z) : use to transform the element in the x,y and z-axis
  • translateX(x): use to transform the element in the x-axis
  • translateY(y): use to transform the element in the y-axis
  • translateZ(z): use to transform the element in the z-axis
  • scale3d(x,y,z): use to scale the element by transforming the element in the x, y and z-axis
  • scaleX(x): use to scale the element by transforming the element in the x-axis
  • scaleY(y): use to scale the element by transforming the element in the y-axis
  • scaleZ(z): use to scale the element by transforming the element in the z-axis
  • rotateX(angle): use to rotate the element by transforming the element at any angle along the x-axis
  • rotateY(angle): use to rotate the element by transforming the element at any angle along the y-axis
  • rotateZ(angle): use to rotate the element by transforming the element at any angle along the z-axis
  • matrix3d(n,n,n,n,n,n ,n,n,n,n,n ,n,n,n,n,n ): use to specify matrix transformation with 16 values

X-axis 3D Transformation

The below example shows 3D transformation 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: rotateX(150deg);
         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 3D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 3D transform
3D transformation along the X-axis

3D Transformation along the Y-axis

illustration below shows 3D transformation 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: rotateY(150deg);
         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 3D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 3D transform
3D transformation along the Y-axis

3D Transformation along the Z-axis

Example below shows 3D transformation along the Z-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: rotateZ(160deg);
         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 3D TRANSFORM PROPERTY</title>
</head>
<body >
   <div class="image_trans" >
      DEVELOFERD
   </div>
   <div class="image_trans2" >
      DEVELOFERD
   </div>

</body>
</html>

RESULT

CSS 3D transform
3D Transformation along the Z-axis

CONCLUSION

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

Leave a Reply

Your email address will not be published. Required fields are marked *