In CSS3 we can move, scale, turn, stretch & spin elements.

With that effect, elements can change shape, size, and position.

List of 2D Transforms Methods

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

translate() Method

With translate() Method we can move elements from one position to other. depending on x-axis and y-axis position.

2D Translate
2D Translate
CSS
div {
   -ms-transform: translate(100px,150px); /* IE 9 */
   -webkit-transform: translate(100px,150px); /* Chrome, Safari, Opera */
   transform: translate(100px,150px);
 }

translate(100px,150px) moves element x-axis by 100px & y-axis by 150px.

rotate() Method

With rotate() Method we can rotate elements clockwise by a given degree. also, we can turn anti-clockwise by applying a negative degree.

2D Rotate
2D Rotate
CSS
div {
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

rotate(45deg) rotate element by 45 degree clockwise.

scale() Method

With scale() Method we can increase or decrease the element size. Depending upon the given parameter x-axis & y-axis.

2D Scale
2D Scale
CSS
div {
  -ms-transform: scale(5,10); /* IE 9 */
  -webkit-transform: scale(5,10); /* Chrome, Safari, Opera */
  transform: scale(5,10);
}

scale(5,10) increase the size by x-axis & y-axis.

skew() Method

With skew() Method we can turn element at given angle. depending upon given x-axis & y-axis.

2D Skew
2D Skew
CSS
div {
  -ms-transform: skew(45deg,65deg); /* IE 9 */
  -webkit-transform: skew(45deg,65deg); /* Chrome, Safari, Opera */
  transform: skew(45deg,65deg);
}

skew(45deg,65deg) turn element by 45 degree x-axis & 65 degree to y-axis.

matrix() Method

With matrix() Method we can combine all 2D transform in to one.

And it will take 6 parameters which is ( rotate, scale, translate, skew ).

2D Matrix
2D Matrix
CSS
div {
  -ms-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* IE 9 */
  -webkit-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* Chrome, Safari, Opera */
  transform: matrix(0.755,0.6,-0.6,0.966,0,0);
}

Full HTML & CSS Code

<!DOCTYPE html>
<html>
    <head>
    <style>
        div {
            width: 100px;
            height: 75px;
            background-color: #1FA67A;
            border: 1px solid black;
            color:#FFFFFF;
        }
        div.translate {
            -ms-transform: translate(50px,75px); /* IE 9 */
            -webkit-transform: translate(50px,75px); /* Chrome, Safari, Opera */
            transform: translate(50px,75px);
        }
        div.rotate {
            -ms-transform: rotate(45deg); /* IE 9 */
            -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
            transform: rotate(45deg);
        }
        div.scale {
            -ms-transform: scale(2,4); /* IE 9 */
            -webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
            transform: scale(2,4);
            left:200px;
            top:30px;
            position:relative;
        }
        div.skew {
            -ms-transform: skew(25deg,45deg); /* IE 9 */
            -webkit-transform: skew(25deg,45deg); /* Chrome, Safari, Opera */
            transform: skew(25deg,45deg);
        }
        div.matrix {
            -ms-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* IE 9 */
            -webkit-transform: matrix(0.755,0.6,-0.6,0.966,0,0); /* Chrome, Safari, Opera */
            transform: matrix(0.755,0.6,-0.6,0.966,0,0);
        }
    </style>
    </head>
    <body>
        <div>Hello. I m a normal DIV !!!</div>
        <div class="translate">Hello. I m a translate DIV !!!</div>
        <div class="rotate">Hello. I m a rotate DIV !!!</div>
        <div class="scale">Hello. I m a scale DIV !!!</div>
        <div class="skew">Hello. I m a skew DIV !!!</div>
        <div class="matrix">Hello. I m a matrix DIV !!!</div>
    </body>
</html>

Leave a Reply

Your email address will not be published.