Hello Readers !

In this blog we will discuss about css3 new attribute transform and transition.

Okay let's start :-

Transform : Mainly transform property uses for give small animation or movement of any object.

To use this you have to know about axis which youll probably recognize from basic algebra math.

It'll be clear to see blow image-

transform: translate(x,y)

Now there is some example of this property :-

To use this html and css you can move an object from right to left .

Html :-

<div id="axis">
  <p></p>
</div>

css:-

 p {
    position: absolute;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    height: 20px;
    width: 20px;
    background: #1EBB71;
    right: 15px
}
#axis {
    background: #fff;
    width: 100%;
    height: 50px
}
#axis:hover p {
    transform: translate(-500px, 0);
    -webkit-transform: translate(-500px, 0);
    -o-transform: translate(-500px, 0);
    -moz-transform: translate(-500px, 0)
}

To use this css you can move an object from right to left .

#axis:hover p {
    transform: translate(500px, 0);
    -webkit-transform: translate(500px, 0);
    -o-transform: translate(500px, 0);
    -moz-transform: translate(500px, 0)
}

To use this css you can move an object from top to bottom .

#axis:hover p {
    transform: translate(0, 300px);
    -webkit-transform: translate(0, 300px);
    -o-transform: translate(0, 300px);
    -moz-transform: translate(0, 300px)
}

To use this css you can move an object from bottom to top.

#axis:hover p {
    transform: translate(0, -300px);
    -webkit-transform: translate(0, -300px);
    -o-transform: translate(0, -300px);
    -moz-transform: translate(0, -300px)
}

To use this css you can move an object diagonaly form initial position.

#axis:hover p {
    transform: translate(300px,-300px);
    -webkit-transform: translate(300px,-300px);
    -o-transform: translate(300px,-300px); 
    -moz-transform: translate(300px,-300px);
}

Scale:-

To use this css you increases or decreases the size of object

#axis:hover p {
    transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    -o-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
}

rotate:-

To use this css you rotate an object clock wise in 360 angle

#axis:hover p {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg); 
    -moz-transform: rotate(360deg);
}

To use this css you rotate an object anti-clock wise in 360 angle

#axis:hover p {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg); 
    -moz-transform: rotate(-360deg);
}

To use this css you execute translate and rotate at a time

#axis:hover p {
    transform: translate(350px, -350px) rotate(360deg);
    -webkit-transform: translate(350px, -350px) rotate(360deg);
    -o-transform: translate(350px, -350px) rotate(360deg);
    -moz-transform: translate(350px, -350px) rotate(360deg);
}

At last we discuss about how to control speed?

We can use 6 types of transition-timing-functions :-

linear : to use that ,transition will have constant speed from start to end.

ease : to use that ,transition will start slowly, then get faster, before ending slowly.

ease-in : to use that ,transition will start slowly.

ease-out : to use that ,transition will end slowly.

ease-in-out : to use that ,transition starts and ends slowly.

cubic-bezier : to use that , you can define specific values for your own transition.