ScaleX

ScaleX refers to a CSS transform function that scales an element along the horizontal x-axis while leaving the y-axis unchanged. It is used inside the CSS transform property, typically in combination with other transforms like translateX, rotate, or scaleY. For example, transform: scaleX(1.5) enlarges the element's width by 50%, while transform: scaleX(0.5) halves its width. A negative value like scaleX(-1) flips the element horizontally about the element's transform-origin, which by default is the element's center. The effect is applied after layout and is hardware accelerated in most browsers, making it suitable for smooth animations and interactive effects.

The default transform-origin is 50% 50% 0, but can be changed with transform-origin to control the pivot point of the scale. When multiple transforms are used, their order matters; the same transforms listed in different orders can produce different results.

Beyond CSS, the concept of scaleX appears in graphics APIs as a horizontal scaling factor in a 2D transformation matrix, typically denoted as scaleX in matrix form; it is one component of the matrix that also includes scaleY and translations.

ScaleX is widely supported in modern browsers and is common in UI design for responsive effects, card flips, and micro-interactions. When using it for accessibility, ensure that any motion is reduced for users with motion sensitivity, or provide a non-animated fallback.