Page 30 - CSS

Chapter 2: 2D Transforms

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/Parameter Details

Defines a transformation that moves the element around a fixed point
rotate(x)
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

Shear mapping, or transvection, distorting each point of an element
skew(x,y)
by a certain angle in each direction

Horizontal shear mapping distorting each point of an element by a
skewX(x)
certain angle in the horizontal direction

https://riptutorial.com/ 8