CSS3 2D Transforms

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

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

Table of Contents

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.

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.

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.

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.

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 ).

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>

Mukul K

I do SEO