Transform

Sintaxe

css

/* Keyword values */
transform: none;
 
/* Function values */
transform: scale(2);
transform: rotate(45deg);
transform: skew(40deg);
 
/* Multiple function values */
transform: scale(2) rotate(45deg);

css

/* Keyword values */
transform: none;
 
/* Function values */
transform: scale(2);
transform: rotate(45deg);
transform: skew(40deg);
 
/* Multiple function values */
transform: scale(2) rotate(45deg);

Scale

MDN

css

scale(sx)
scale(sx, sy)
scaleX(sx)
scaleY(sy)

css

scale(sx)
scale(sx, sy)
scaleX(sx)
scaleY(sy)

scale.html:

transform

Rotate

MDN

css

rotate(a)
rotateX(a)
rotateY(a)
rotateZ(a)
rotate3d(x, y, z, a)

css

rotate(a)
rotateX(a)
rotateY(a)
rotateZ(a)
rotate3d(x, y, z, a)

rotate.html:

transform

Translate

MDN

css

translate(tx)
translateX(tx)
translateY(tx)
translateZ(tx)
translate(tx, ty)
translate3d(tx, ty, tz)

css

translate(tx)
translateX(tx)
translateY(tx)
translateZ(tx)
translate(tx, ty)
translate3d(tx, ty, tz)

translate.html:

transform

Skew

MDN

css

skew(ax)
skewX(ax)
skewY(ax)
skew(ax, ay)

css

skew(ax)
skewX(ax)
skewY(ax)
skew(ax, ay)

skew.html:

transform

Matrix

MDN

css

matrix(a, b, c, d, tx, ty)
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

css

matrix(a, b, c, d, tx, ty)
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

matrix.html:

transform

Referências

Editar esta página