CSS3 transforms (2D and 3D transforms).

CSS3 transforms helps to rotate, to change the shape, size and the position of targeted element.

There are two types of transforms.

  • 2D transforms.
  • 3D transforms.

There are following important CSS3 transforms methods.

  • Translate().
  • Rotate().
  • Scale().
  • Skew().
  • Matrix().

Rotate helps to rotate an element.

Scales increases or decreases the size of an element.

Skew changes the shape of an element.

Matrix allows to define multiple transformation at once.

These methods contain parameters.

2D transforms.

2D transforms allows to transform the element using X and Y axis.

There are following CSS3 2D transform methods.

  • Translate(xvalue,yvalue).
  • Rotate(angle).
  • Scale(xvalue,yvalue).
  • Skew(angleX, angleY).
  • Matrix(n,n,n,n,n,n).

Above methods can be written separately.

  • TranslateX(xvalue).
  • TranslateY(yvalue).
  • ScaleX(xvalue).
  • ScaleY(yvalue)
  • SkewX(angleX).
  • SkewY(angleY).

3D transforms.

Z axis play an important role during 3D transforms. 3D transforms allows to transform the element using X,Y and Z axis.

There are following CSS3 2D transform methods.

  • Translate3d(xvalue,yvalue, zvalue).
  • Rotate3d(angleX, angleY, angleZ).
  • Scale3d(xvalue,yvalue,zvalue).
  • Skew3d(angleX, angleY, angleZ).
  • Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n).
  • Perspective(value).

Above methods can be written in more specific way.

  • TranslateX(xvalue).
  • TranslateY(yvalue).
  • TranslateZ(zvalue).
  • ScaleX(xvalue).
  • ScaleY(yvalue).
  • ScaleZ(zvalue).
  • SkewX(angleX).
  • SkewY(angleY).
  • SkewZ(angleZ).
  • RotateX(angleX).
  • RotateY(angleY).
  • RotateZ(angleZ).

CSS3 transforms methods explanation.

Translate.

Translate changes the specified position of an element.
2D translate example: transform:translate(30px, 40px).
3D translate example: transform:translate3d(30px, 40px, 20px).

More specific example:

transform: translateX(20px): Translate can be applied only by using x-axis.

transform: translateY(20px): Translate can be applied only by using y-axis.

transform: translateZ(20px): Translate can be applied only by using z-axis.

Rotate.

2D rotate allows to rotate an element either clockwise or anticlockwise.

3D rotate allows to rotate an element along with axis.

2D rotate example: transform:rotate(180deg);

3D rotate examples:

transform:rotateX(205deg): Rotates the element 205deg clockwise along with x-axis.

transform:rotateY(-40deg): Rotates the element 40deg anticlockwise along with y-axis.

transform:rotateZ(-60deg): Rotates the element 60deg anticlockwise along with z-axis.

Scale.

Helps to scale the size of the specified element. Negative values are possible.

2D scale example:

transform:scale(3,4): Scales the element 3 times at x-axis and  4 times at y-axis.
transform:scale(2): Scales the element 2 times at both axis.

3D scale examples:

transform:scaleX(2): Scales the element 2 times at x-axis.

transform:scaleY(3): Scales the element 3 times at y-axis.

transform:scaleZ(2): Scales the element 2 times at z-axis.

Negative scales values.

Negative scale values will rotate the element 180 deg along with specified axis.

Example:
transform:scale(-3,4): Scales the element 3 times at x-axis and  4 times at y-axis. But rotates x-axis 180deg.
transform:scale(3,-4): Scales the element 3 times at x-axis and  4 times at y-axis. But rotates y-axis 180deg.

CSS3 transforms Scale example

Skew.

Skews the element along with specified axis.

Example:

transform:skew(15deg, 20deg);

The above example will skew the element 15deg along with x-axis and 20deg along with the y-axis.

transform:skewX(15deg)= Will skew the element 30deg along with x-axis.
transform:skewY(20deg)=will skew the element 40deg along with y-axis.

css transform: skew() example

Matrix.

Combines all transform methods.

Example

transform: matrix(2,1,1,2,200,150)

There are 6 parameters. These parameters have the following specific values, respectively.

  1. scaleX
  2. skewY
  3. skewX
  4. scaleY
  5. translateX
  6. translateY

CSS3 transforms properties.

  • transform-origin.
  • transform-style.
  • backface-visibility.
  • perspective.
  • perspective-origin.

Detailed explanation about CSS3 transforms properties

 

 

Comments

comments