This property is use to the change the shape and size and position of any element on the web-page. It transforms the elements along the X-axis and Y-axis is knows as CSS 2D Transform. There are 6 Main transform method.

Banner Basic Engineer 03
Home Page – Basic Engineer
  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

Transition property

This property is use to change effects of any element smoothly according to specified duration.

  1. Transition-timing-function.
    This property specified the speed curved of the transition effect.
    a. Ease.
    b. Learner.
    c. Ease-in.
    d. Ease-out.
    e. Ease-in-out.
  2. Transition-delay:30s;
  3. Transition-duration:50s;

Translate()

This method is use to move any element from one place to another place is knows as Translate.

Example

<html>
 
<head>
    <title>2D Transform</title>
    <style>
    .why {
        font-size: 35px;
        margin: 25px 0;
        margin-left: 100px;
    }
     
    img {
        border: 1px solid black;
        transition-duration: 3s;
        -webkit-transition-duration: 3s;
    }
     
    img:hover {
        transform: translate(100px, 100px);
        -ms-transform: translate(100px, 100px);
        -webkit-transform: translate(100px, 100px);
    }
    </style>
</head>
 
<body>
    <div class="why">Translate() Method</div>
        <img src="https://tse3.mm.bing.net/th?id=OIP.JrigS3USw8GO8CS0DvN-KwHaE8&pid=Api&P=0"alt="GFG" />
</body>
</html>
Example of translate Method

Rotate()

This method is use to rotate any element clock wise or anti-clock wise according to the specified degree is knows as Rotate().

Example

<html>
<head>
	
	<style>
	img {
		border: 5px solid green;
	}
	
	img:hover {
		-ms-transform: rotate(30deg);
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
	}
	
	.why {
		font-size: 25px;
		text-align: center;
		margin-top: 100px;
	}
	</style>
</head>

<body>
	<div class="why">Rotation() Method</div>
		<img src="https://tse2.mm.bing.net/th?id=OIP.2r4zmvwrDa3lV5otsV4y9wHaLH&pid=Api&P=0" alt="GFG" />
</body>
</html>

Scale ()

This method is use to increased or decreased the size of element is knows as Scale().

Example

<html>
<head>
    <style>
    img {
        border: 5px solid green;
    }
     
    img:hover {
        -ms-transform: scale(1, 2);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 2);
    }
     
    .why {
        font-size: 25px;
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>
 
<body>
    <div class="why">Scale() Method</div>
        <img src="http://parisnajd.com/backgd/data/media/2/1600FG100_2_038.jpg"alt="GFG" />
</body>
</html>

SkewX()

This method is use to increased or decreased X axis of element is knows as SkewX().

Example

<html>
<head>
	<style>
	img {
		border: 5px solid green;
	}
	
	img:hover {
		-ms-transform: skewX(20deg);
		-webkit-transform: skewX(20deg);
		transform: skewX(20deg);
	}
	
	.why {
		font-size: 25px;
		margin-top: 100px;
	}
	</style>
</head>

<body>
	<div class="why">skewX() Method</div>
		<img src="https://tse1.mm.bing.net/th?id=OIP.i2iwkFKSIuUvxXMNixsjLwHaFj&pid=Api&P=0"alt="GFG" />
</body>
</html>

SkewY()

This method is use to increased or decreased Y axis of element is knows as SkewY().

Example

<html>
<head>
    <style>
    img {
        border: 5px solid green;
    }
   
    img:hover {
        -ms-transform: skewY(20deg);
        -webkit-transform: skewY(20deg);
        transform: skewY(20deg);
    }
     
    .why {
        font-size: 25px;
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>
 
<body>
    <div class="why">skewY() Method</div>
        <img src="https://i.ytimg.com/vi/HUpPEx9X0P4/maxresdefault.jpg"alt="GFG" />
</body>
 
</html>

Matrix

Matrix method combines all the 2D transform property into a single property is knows as Matrix. The six parameters as matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).

Example

<html>
<head>
    <style>
    img {
        border: 5px solid green;
    }
     
    img:hover {
        -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
        -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
        transform: matrix(1, -0.3, 0, 1, 0, 0);
    }
     
    .why {
        font-size: 35px;
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>
 
<body>
    <div class="why">matrix() Method</div>
        <img src="http://1.bp.blogspot.com/-p0vkZIAIcbk/VRDd8toj_pI/AAAAAAAA54U/ukF_9s3cMXI/s1600/shonephotography-037.jpg"alt="GFG" />
</body>
</html>

CSS 3D Transform

 3D transformation the elements are rotated along three direction such as X-axis, Y-axis and Z-axis is knows as CSS 3D transform.

Three type of main Transformation

  • rotateX()

Example

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
         }
         div#why {
            -webkit-transform: rotateX(150deg); 
            transform: rotateX(150deg); 
         }
      </style>
   </head>

   <body>
   
      <div>
         hello student how are you 
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "why">
         hello student how are you 
      </div>
      
   </body>
</html>
Output
  • rotateY()

Example

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color:red;
            border: 5px solid green;
         }
         div#why {
            -webkit-transform: rotateY(150deg); 
            transform: rotateY(150deg); 

         }
      </style>
   </head>

   <body>
   
      <div>
         hello student how are you 
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "why">
          hello student how are you
      </div>
      
   </body>
</html>
  • rotateZ()

Example

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: red;
            border: 5px solid green;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            transform: rotateZ(90deg); 
         }
      </style>
   </head>

   <body>
      <div>
        hello student how are you 
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
        hello student how are you 
      </div>
   </body>
</html> 

If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.

To know more about CSS 2D please check Wikipedia Click here.

Stay Connected Stay Safe. Thank you


Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!

0 Comments

Leave a Reply

Avatar placeholder

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