CSS3 2D Transforms

March 18, 2015
by Inaam Hussain

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

With that effect element can change shape, size, 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 given degree. also we can rotate anti-clockwise by applying 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

HTML & CSS
<!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>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment