Αξία transform στο style

Ορισμός και χρήση

transform Η ιδιότητα αυτή εφαρμόζει 2D ή 3D μετατροπές στο στοιχείο. Η ιδιότητα αυτή επιτρέπει τη ρύθμιση στροφής, κλίσης, κλιμάκωσης, μετακίνησης κ.λπ. στο στοιχείο.

Δείτε επίσης:

Βιβλίο αναφοράς CSS:transform attribute

Παράδειγμα

Εκτροπή στοιχείου div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Try it yourself

Syntax

Return transform attribute:

object.style.transform

Set transform attribute:

object.style.transform = "none|transform-functions|initial|inherit"

Attribute value

Value Description
none Define no transformation.
matrix(n, n, n, n, n, n) Define 2D transformation using a matrix with six values.
matrix3d(n, n, n, n, etc....) Define 3D transformation using a 4x4 matrix with 16 values.
translate(x, y) Define 2D translation.
translate3d(x, y, z) Define 3D translation.
translateX(x) Define translation using only the X axis value.
translateY(y) Define translation using only the Y axis value.
translateZ(z) Define 3D translation using only the Z axis value.
scale(x, y) Define 2D scale transformation
scale3d(x, y, z) Define 3D scale transformation.
scaleX(x) Define scale transformation by giving a value to the X axis.
scaleY(y) Define scale transformation by giving a value to the Y axis.
scaleZ(z) Define 3D scale transformation by giving a value to the Z axis.
rotate(angle) Define 2D rotation with specified angle in parameters.
rotate3d(x, y, z, angle) Define 3D rotation.
rotateX(angle) Define 3D rotation along the X axis.
rotateY(angle) Define 3D rotation along the Y axis.
rotateZ(angle) Define 3D rotation along the Z axis.
skew(x-angle, y-angle) Define 2D skew transformation along both the X and Y axes.
skewX(angle) Define 2D skew transformation along the X axis.
skewY(angle) Define 2D skew transformation along the Y axis.
perspective(n) Define the perspective for 3D transformation elements.
initial Set this attribute to its default value. See initial.
inherit Inherit this attribute from its parent element. See inherit.

Technical details

Default value: None
Return value: A string representing the element's transform attribute.
CSS version: CSS3

Browser support

The numbers in the table indicate the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0