CSS3 Transform

2D & 3D CSS Transform functions visualizer

≡ ×
Front
Back

Rotation (2D)

rotate() Rotates an element around a fixed point on the 2D plane.

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. The amount of rotation created by rotate() is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. (A rotation by 180° is called point reflection.)

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

— More info: developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

Rotation (3D)

rotateX() Rotates an element around the horizontal axis.

The rotateX() CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. The amount of rotation created by rotateX() is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

rotateX(a) is equivalent to rotate3d(1, 0, 0, a).

— More info : developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX

rotateY() Rotates an element around the vertical axis.

The rotateY() CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. The amount of rotation created by rotateY() is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

rotateY(a) is equivalent to rotate3d(0, 1, 0, a).

— More info : developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY

rotateZ() Rotates an element around the z-axis.

The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it.

The amount of rotation created by rotateZ() is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

rotateZ(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a).

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ

Perspective

perspective() Sets the distance between the user and the z=0 plane.

The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane.

The perspective distance used by perspective() is specified by a length value (a number followed by a length unit: em, rem, px, pt, mm…), which represents the distance between the user and the z=0 plane. A positive value makes the element appear closer to the user, a negative value farther.

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective

Transform Origin

transform-origin() Sets the origin for an element's transformations.

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the rotate() function is the center of rotation.

The transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset.

  • One-value syntax: The value must be a length, a percentage, or one of the keywords left, center, right, top, and bottom.
  • Two-value syntax: One value must be a length, a percentage, or one of the keywords left, center, and right. The other value must be a length, a percentage, or one of the keywords top, center, and bottom.
  • Three-value syntax: The first two values are the same as for the two-value syntax. The third value must be a length. It always represents the Z offset.

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Scaling (Resizing)

scale() Scales an element up or down on the 2D plane.

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales.

This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).

When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect.

The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.

The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.

scale(sx)
scale(sx, sy)
/*
- sx : A number representing the abscissa of the scaling vector.
- sy : A number representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.
*/

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

scaleX() Scales an element up or down horizontally.

The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally).

It modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the transform-origin property).

scaleX(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1).

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX

scaleY() Scales an element up or down vertically.

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically).

It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property).

scaleY(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1).

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY

Translation (Moving)

translate() Translates an element on the 2D plane.

The translate() CSS function repositions an element in the horizontal and/or vertical directions.

This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.

The translate() function is specified as either one or two values.

translate(tx)
translate(tx, ty)
/*
- tx : Is a length value representing the abscissa (x-coordinate) of the translating vector.
- ty : Is a length value representing the ordinate of the translating vector (or y-coordinate). If unspecified, its default value is 0. For example, translate(2) is equivalent to translate(2, 0).
*/

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

translateX() Translates an element horizontally.

The translateX() CSS function repositions an element horizontally on the 2D plane.

Syntax : translateX(t). (t is a length value representing the abscissa of the translating vector.)

translateX(tx) is equivalent to translate(tx, 0) or translate3d(tx, 0, 0).

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

translateY() Translates an element vertically.

The translateY() CSS function repositions an element vertically on the 2D plane.

translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0).

Syntax : translateY(t). (t is a length value representing the ordinate of the translating vector.)

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

Skewing (Distortion)

skew() Skews an element on the 2D plane.

The skew() CSS function defines a transformation that skews an element on the 2D plane.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

The skew() function is specified with either one or two values, which represent the amount of skewing to be applied in each direction.

skew(ax)
skew(ax, ay)
/*
- ax : Is an angle value expressed in degrees, gradians, radians, or turns; representing the angle to use to distort the element along the abscissa.
- ay : Is an angle value expressed in degrees, gradians, radians, or turns; representing the angle to use to distort the element along the ordinate. If not defined, its default value is 0, resulting in a purely horizontal skewing.
*/

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

skewX() : Skews an element in the horizontal direction.

The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

skewX(a) is equivalent to skew(a).

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX

skewY() Skews an element in the vertical direction.

The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. The ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY

Close