מאפיין transform

מאפיין transform מחיל רשימת פונקציות טרנספורמציה על מערכת הצירים שאליה האלמנט מצויר — סיבוב, הזחה, קנה-מידה, הטיה, ומטריצות 2D/3D. מחושב למטריצה אחת.

.box { transform: translate(20px, 10px); }

.box { transform: rotate(45deg) scale(1.5) translateX(10px); }

פחות:-360 יותר:360 צעד:1

יחידות:px | % | deg | rad | turn |

noneערך ברירת המחדל. לא מוחלת טרנספורמציה.

translate()הזחה דו-ממדית: translate(x, y?).

translateX()הזחה אופקית בלבד.

translateY()הזחה אנכית בלבד.

translateZ()הזחה בציר Z (תלת-ממד).

translate3d()הזחה תלת-ממדית: translate3d(x, y, z).

scale()קנה-מידה דו-ממדי: scale(x, y?).

scaleX()קנה-מידה אופקי.

scaleY()קנה-מידה אנכי.

scaleZ()קנה-מידה בציר Z (תלת-ממד).

scale3d()קנה-מידה תלת-ממדי.

rotate()סיבוב דו-ממדי בזווית.

rotateX()סיבוב סביב ציר X.

rotateY()סיבוב סביב ציר Y.

rotateZ()סיבוב סביב ציר Z.

rotate3d()סיבוב תלת-ממדי סביב וקטור.

skew()הטיה דו-ממדית: skew(angleX, angleY?).

skewX()הטיה אופקית.

skewY()הטיה אנכית.

matrix()מטריצה 2D של 6 ערכים.

matrix3d()מטריצה 3D של 16 ערכים.

perspective()פרספקטיבה תלת-ממדית.

CSS Transforms Module Level 1

Editor's Draft

Show all code