CSS3 Transforms(Fg. 1)

    With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

A transform is an effect that lets an element change shape, size and position. You can transform your elements using 2D or 3D transformation.

   Internet Explorer 10, Firefox, and Opera support the transform property. Chrome and Safari requires the prefix -webkit-. Opera does not yet support 3D transforms

Note: Internet Explorer 9 requires the prefix -ms-.

Fg. 1 (CSS3 Transforms)

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Fg. 2 (2D Transforms)

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

2D Transforms(Fg.s 2)

In this part you will learn about the 2d transform methods:

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

You will learn about 3D transforms in the next part.

The 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:(See Fg. 3.1)

The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

Fg. 3.1 (The Translate() Method)

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

Fg. 4.1 (The Rotate() Method)

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

The Rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise. The value rotate(30deg) rotates the element clockwise 30 degrees. (Fg. 4.1)

The 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):(See Fg. 5.1)

The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

Fg. 5.1 (The Scale() Method)

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}

Fg. 6.1 (The Skew() Method)

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

The 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: ( See Fg. 6.1)

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

The 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.( See Fg. 7.1)

Fg. 7.1 (The Matrix() Method)

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

(CSS3 3D Transforms)

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

3D Transforms

CSS3 allows you to format your elements using 3D transforms.

In this part you will learn about some of the 3D transform methods:

  • rotateX()
  • rotateY()

The RotateX() 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.( See Fg. 8.1)

Fg. 8.1 (The RotateX() Method)

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */

Fg. 9.1 (The RotateY() Method)

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */

The RotateY() Method

With the rotateY() method, the element rotates around its Y-axis at a given degree.( See Fg. 9.1)

  • rotateX()
  • rotateY()