CSS 2D Transforms

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • Rotate Transform
  • transform: rotate(<angle>)
  • Translate Transform
  • transform: translate(<length-or-percentage> [, <length-or-percentage>]?)
  • transform: translateX(<length-or-percentage>)
  • transform: translateY(<length-or-percentage>)
  • Skew Transform
  • transform: skew(<angle> [, <angle>]?)
  • transform: skewX(<angle>)
  • transform: skewY(<angle>)
  • Scale Transform
  • transform: scale(<scale-factor> [, <scale-factor>]?)
  • transform: scaleX(<scale-factor>)
  • transform: scaleY(<scale-factor>)
  • Matrix Transform
  • transform: matrix(<number> [, <number> ]{5,5})

Parameters

Function/ParameterDetails
rotate(x)Defines a transformation that moves the element around a fixed point on the Z axis
translate(x,y)Moves the position of the element on the X and Y axis
translateX(x)Moves the position of the element on the X axis
translateY(y)Moves the position of the element on the Y axis
scale(x,y)Modifies the size of the element on the X and Y axis
scaleX(x)Modifies the size of the element on the X axis
scaleY(y)Modifies the size of the element on the Y axis
skew(x,y)Shear mapping, or transvection, distorting each point of an element by a certain angle in each direction
skewX(x)Horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction
skewY(y)Vertical shear mapping distorting each point of an element by a certain angle in the vertical direction
matrix()Defines a 2D transformation in the form of a transformation matrix.
angleThe angle by which the element should be rotated or skewed (depending on the function with which it is used). Angle can be provided in degrees (deg), gradians (grad), radians (rad) or turns (turn). In skew() function, the second angle is optional. If not provided, there will be no (0) skew in Y-axis.
length-or-percentageThe distance expressed as a length or a percentage by which the element should be translated. In translate() function, the second length-or-percentage is optional. If not provided, then there would be no (0) translation in Y-axis.
scale-factorA number which defines how many times the element should be scaled in the specified axis. In scale() function, the second scale-factor is optional. If not provided, the first scale-factor will be applied for Y-axis also.

Remarks

2D Coordiante system

Transforms are made according to a 2D X/Y coordiante system. The X axis goes from right to left and the Y axis goes downwards as shown in the following image:

2D CSS coordinate system

So a positive translateY() goes downwards and a positive translateX() goes right.

Browser support and prefixes

  • IE supports this property since IE9 with the -ms- prefix. Older versions and Edge don't need the prefix
  • Firefox supports it since version 3.5 and needs the -moz- prefix until version 15
  • Chrome since version 4 and until version 34 needs the -webkit- prefix
  • Safari needs the -webkit- prefix until version 8
  • Opera needs the -o- prefix for version 11.5 and the -webkit- prefix from version 15 to 22
  • Android needs the -webkit- prefix from version 2.1 to 4.4.4

Example of prefixed transform:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);


Got any CSS Question?