CSS3 transformations and transform property (transform property)

CSS transformations give us the ability to perform basic manipulations on elements in a viewport. We can translate move, rotate, scale and skew elements. In CSS3 there are 2D transformations and 3D transformations.

CSS3 transform property and methods

The shorthand method that allows us combine transformations in one, single, property is called the transform property.

Syntax:

selector { 

         transform: none | transform-functions | initial | inherit;

}

Values:

The CSS3 transform methods include these values:

• translate:
  • translate(x,y); Defines a 2D transformation;
  • translate3D(x,y,z); Defines a 3D transformation;
  • translateX(x); Creates transformation using only values for X-axis;
  • translateY(y); Creates transformation using only values for Y-axis;
  • translateZ(z); Creates transformation using only values for Z-axis;
• scale:
  • scale(x,y); Defines a 2D scale transformation;
  • scale3D(x,y,z); Defines a 3D scale transformations;
  • scaleX(x); Creates transformation by adding value for the X-axis only;
  • scaleY(y); Creates transformation by adding value for the Y-axis only;
  • scaleZ(z); Creates transformation by adding value for the Z-axis only;
• rotate:
  • rotate(angle); Defines a 2D rotation with the parameter given in degrees;
  • rotate3D(x,y,z,angle); Defines a 3D rotation;
  • rotateX(angle); Creates a 3D rotation along X-axis only;
  • rotateY(angle); Creates a 3D rotation along Y-axis only;
  • rotateZ(angle); Creates a 3D rotation along Z-axis only;
• skew:
  • skew(x-angle, y-angle); Defines a 2D skewing along X-axis and Y-axis;
  • skewX(angle); Creates a 2D skewing along X-axis only;
  • skewY(angle); Creates a 2D skewing along Y-axis only;
• perspective(n); Creates a perspective view for an 3D element;
• none,
• initial, inherit

Example

The CSS3 transform shorthand property examples with multiple methods:

 

›› go to examples ››