CSS transform հատկություն

Հատկանշում է 2D կամ 3D փոխակերպում տարրին:

Օրինակ

div {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg); /* Safari */
}
Փորձել
-webkit-
Նախնական արժեք none
Ժառանգվող
Անիմացվող
JavaScript սինթաքս օբյեկտ.style.transform="rotate(7deg)"
Արժեք Բնութագիր
matrix(n,n,n,n,n,n) Հատկանշում է 2D փոխակերպում, օգտագործելով 6 արժեքների մատրիցա:
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Հատկանշում է 3D փոխակերպում, օգտագործելով 16 արժեքների 4x4 մատրիցա:
none Հատկանշում է, որ փոխակերպում չի լինելու:
perspective(n) Հատկանշում է հեռանկարային տեսադաշտ 3D փոխակերպված տարրի համար:
rotate(angle) Հատկանշում է 2D պտույտ: Անկյունը հատկանշվում է որպես արժեք:
rotate3d(x,y,z,angle) Հատկանշում է 3D պտույտ: Անկյունը հատկանշվում է որպես արժեք կոորդինատների հետ միասին:
rotateX(angle) Հատկանշում է 3D պտույտ x առանցքի երկայնքով:
rotateY(angle) Հատկանշում է 3D պտույտ y առանցքի երկայնքով:
rotateZ(angle) Հատկանշում է 3D պտույտ z առանցքի երկայնքով:
scale(x,y) Հատկանշում է 2D մասշտաբային փոխակերպում:
scale3d(x,y,z) Հատկանշում է 3D մասշտաբային փոխակերպում:
scaleX(x) Հատկանշում է մասշտաբային փոխակերպում, տալով արժեք x առանցքի համար:
scaleY(y) Հատկանշում է մասշտաբային փոխակերպում, տալով արժեք y առանցքի համար:
scaleZ(z) Հատկանշում է 3D մասշտաբային փոխակերպում, տալով արժեք z առանցքի համար:
skew(x-angle,y-angle) Հատկանշում է 2D թեք փոխակերպում x և y առանցքների երկայնքով:
skewX(angle) Հատկանշում է 2D թեք փոխակերպում x առանցքի երկայնքով:
skewY(angle) Հատկանշում է 2D թեք փոխակերպում y առանցքի երկայնքով:
translate(x,y) Հատկանշում է 2D տեղափոխում:
translate3d(x,y,z) Հատկանշում է 3D տեղափոխում:
translateX(x) Հատկանշում է տեղափոխում, օգտագործելով արժեք միայն x առանցքի համար:
translateY(y) Հատկանշում է տեղափոխում, օգտագործելով արժեք միայն y առանցքի համար:
translateZ(z) Հատկանշում է 3D տեղափոխում, օգտագործելով արժեք միայն z առանցքի համար:
initial Վերագրում է այս հատկությունն իր նախնական արժեքին:
inherit Ժառանգում է այս հատկությունն իր ծնող տարրից: