Web Development

CSS3 Transformers in 2D

CSS3 Transformers in 2D is the section 7 of Basics of CSS3.

A transformation is an effect that lets an element change its shape, size and position. This transformation includes movement, scale, turn, spin, and stretch. Using CSS3 transform, we can do all of these things to an element. It can be either in 2D or 3D. We are going to coverup the 2Dimensional (2D) part in this section. We’ll catchup with 3Dimensional part later.

 

2D Transforms Methods

Following are the few of methods that comes with CSS3 2D Transforms.

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

Let’s go with each one.

Translate Method

With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position. We’ll go through a example and its syntax.

[code language=”css”] div {
transform: translate(350px,20px);
}
[/code]
This is a transformed division.
This is a normal division.

Here we moved a division to a specific x and y position.

 

Rotate Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

This is a rotated division.
This is a normal division.
[code language=”css”] div {
transform: rotate(30deg);
}
[/code]

Here we rotated the division by 30 degrees in clockwise.

Scale Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis).

This is a scaled division.
This is a normal division.
[code language=”css”] div {
transform: scale(2.5,2);
}
[/code]

The value scale(2.5,2) transforms the width to be 2.5 times big as its original size, and the height 2 times as its original size.

Skew Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines.

This is a transformed division.
This is a normal division.
[code language=”css”] div {
transform: skew(30deg,20deg);
}
[/code]

The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.

Matrix Method

The matrix() method combines all of the 2D transform methods into one. The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

This is a transformed division.
This is a normal division.
[code language=”css”] div {
transform: matrix(0.566,0.5,-0.5,0.866,0,0);
}
[/code]

Remember we are not finished yet. We need to catchup with 3 Dimensional transformation. So we’ll be back with it in the next section. So stay tuned…

WHAT’S NEXT?

See what is CSS3 Transformers in 3D.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW