CSS Transform Apply 2 D or 3 D

CSS Transform Apply 2 D or 3 D Transformations to an Element: Translate | Scale | Rotate | Skew

Translate Move an element relative to its current position. Also moves content.

Translate Move horizontally. Amount in px or %, positive or negative values • transform: translate(x); Move horizontally & vertically • transform: translate(x, y); • transform: translate. X(x); Move horizontally • transform: translate. Y(y); Move vertically

Scale Make an element bigger or smaller. Stretches content.

Scale Change x & y dimensions by this value. Decimal representation of amount. Ex: 1. 5 = 150% bigger • transform: scale(amt); Scale x & y by separate amounts • transform: scale(x, y); Scale x (stretch horizontally) • transform: scale. X(amt); Scale y (stretch vertically) • transform: scale. Y(amt);

y-axis x-axis z-axis Rotate Turn an element along one or more of its axes. Rotates content too.

Rotate Amount in degrees (ex: 10 deg) Positive (clockwise) or Negative (counterclockwise) • transform: rotate(amt); Rotate around xaxis • transform: rotate. X(amt); Rotate around yaxis • transform: rotate. Y(amt); Rotate around zaxis • transform: rotate. Z(amt);

X Y X&Y Skew an element along x or y axis or both. Skews content too.

Skew Amount in degrees (ex: 10 deg) X and y can be different amounts • transform: skew(x, y); Skew along xaxis • transform: skew. X(amt); Skew along yaxis • transform: skew. Y(amt);