CSS3 2D Transforms (Part II) - translate() , scale()

This is another tutorial about CSS3's 2D Transforms.
In this tutorial we will be discussing translate() and scale() properties of 2D transforms.

translate()

Using this property we can move any element from it's current position to some where else, except Space :P

I mean, if a div box's initial position is 10px form right and 10px from top. With transform() we can move it from 10px right to 50px right and from 10px top to 50px top.
Not just 10's and 50's, you can choose these values, whatever you want.

Look at the code snippet below:

div#div2 {
     -ms-transform: translate(50px,100px); /* IE 9 */
     -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
     transform: translate(50px,100px); /* Standard syntax */
     }

Look at the output:

Well, let's try something cool in the above example. Just hover over the "Second DIV element", and see:

Here is the whole CSS3 code used for second output box:

div {
     width: 100px;
     height: 75px;
     background-color: red;
     border: 1px solid black;
     transition: 0.3s;
     -webkit-transition: 0.3s;
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
     }

div#div2 {
     -ms-transform: translate(50px,100px); /* IE 9 */
     -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
     transform: translate(50px,100px); /* Standard syntax */
     background-color: yellow;
     }

---

scale()

This property is used to change the width and height of any HTML element using CSS3. 

You can do pretty much cool things using this property e.g., a popping out image on hover, or some DIV element increasing its width and height on hover etc. 

Hover over the second DIV element, and see:

The code used in the above example is:

div#div2 {
     -ms-transform: scale(2,3); /* IE 9 */
     -webkit-transform: scale(2,3); /* Chrome, Safari, Opera */
     transform: scale(2,3); /* Standard syntax */
     }

You can try alot of different effects using CSS3 2D transforms. Just play with them, apply them to some of the images, and see the results. If you face any kind of difficulty at any place, you can simply do comment, and I'll reach you as soon as possible. 

• email
• facebook
• linkedin
• twitter
• reddit
• google+

Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +