CSS ?? ??? ?? ??? CSS? ??, ?? ? ??? ??? ?????. ??? ??? ?? ?? ??? ?? ???? ????? ?? ??? ?? ? ?? ?? ?????. ?? ?? ??, ?? ?? ???? ??? ?? ???? ????? ?? ? ? ??????. ??? ??? ??? ?? ???? ??? ??? ????????.

?? () ?? ??? ??-??? ??? ??? ??? ??? ??????. ?? ()? ???? ??? ?? ???? ??? (?? ?? ?) ?? ?? ?? ?? (?? ?? ?)? ?????. ? ??? ??? ??? ??? ?? ?? ?? ?? ?? ?????.
rotate () ??? ?? ??? ?? ?????. ?? ??? CSS ?? ?? ?? ?? 3? ?? ?????. ??? DEG (?), RAD (Radian), Grad (Gradient) ?? ?? ?? ? ? ????. ?? ??? 360deg, 6.28rad, 400grad ?? 1Turn? ????.
• ????? ?? ??? ?? ?, ?? ?? ??? ?? (? : 540deg ?? 1.5 ?)? ?????. ??? ?? ?? ??????. ?? ??, 540deg? ??? ??? 180deg (540??? 360?)? ??? ??? ???? 1.5 ?? ??? ??? .5 ? (1.5 - 1)? ??? ??? ?????. ??? 0DEG?? 540DEG ?? 1 ???? 1.5 ???? ?? ?? ?????? ??? 1.5 ? ??????.
2 ?? ???? ?? : Scale, Scalex ? Scaley ???? ??? ???? X Dimension (scalex), y ?? (scaley) ?? ? ? (scale)?? ??? ??? ??? ???? ?? ? ????. ????? ?? ??? ?? ???, ??? ???? ??? ?? ??? ???? ??? ? ???? ?????.

? ???? ??? ?? ??? ?? ?? ??? ?????. ? ??? ?? ?? ? ?? ?? ? ? ????. ??? ?? ???? ????. 1?? ? ?? ??? ??? ??? ??????. ?? ??, ??? (1.5)? X ? Y ??? ??? ??? 1.5 ? ? ??????. 0? 1 ??? ?? ??? ??? ??? ????.

0?? ?? ?? ??? ??? ??? ?? ???? ?? (??) ??? ????.
?? : scale (0)? ???? ??? 0?? ?? ??? 0?? ??? ??? ?????.

??? (1)? ???? ID ??? ?????. ?, ???? ??? ???? ?? ??? ??? ?????. ??? (-1)? ???? ??? ??? ??? ???? ??? ?? ?? ??? ?????. ??? ??? ???? ???? ??? ??? ?? ????? ????? ??? ?????. ??? ??? ???? ?? x ? y ??? ?? ? ? ????. ??? (1.5, 2)? ? ?? ??? ??????. ? ?? ?? ??? X ??? ???????. ?? ??, ??? (-1, 1)? ???? x ?? ?? ????? ??? ?? ? ? ????. ?? ?? ??? ???? ??? ???? ? ?? ??? ?????.

2 ?? ?? ?? : TranslateX, Translatey ? Translate ?? ??? ??? ??? ???? ?? ??? ??? ??? ??? ??????. ?? ??? ????? ?? ??? ??? ??? ?? ??? ? ??? ???? ????. ??? ???? ??? ??? ??? ????. ? 2 ?? ?? ?? (TranslateX, Translatey ? Translate)? ?? ?? ???? ?? ??? ?????. ?? ???? ?? (PX), EM, REM ? ??? ?? (VW ? VH)? ?????.

translatex ??? ??? ?? ??? ??? ?????. ??? ???? 0 ?? ? ?? ?? : TransitionX (50px)? ??? ?? 50 ??? ?? ?? ????? ?????. ?????, Translatey? ??? ?? ??? ??? ?????. Transitiony (50px)? ??? ???? 50 ??? ??????. translate ()? ???? ?? ??? ???? ??? ?? ? ???? ??? ? ????. ?? ? ?? ?? ??? x ?? ?? y ?? ?? ?????. ?? ??? ?? (120%, -50px) ?? ???? ??? ??? ?????. ??? ??? ?? ???? ?? ??? ?? ???? ?? ????? ??? ?? 120%? ???? ?????. (??) ? ???? -50px? ??.

?? ? ?? ?? ??? ???? ?? ?? ?? ???? ?? ????. Translate () ????? ??? ?????. Translate (100px, 200px)? ??? TranslateX (100px) Translatey (200px)? ?????. ?? ?? ?? ??? ????? ????? (Translatex? ??) ?? ??? (Translatey? ??). ?? ?? ??? ?? (TranslateX) ?? UP (Translatey)? ?????.

??? ??? ??, ???, ? ?? ??? ??? ? ?? ?????. ??, ???, ?? ? ?? ??? ?? ?????? ????? ?? ??? ???? ??? ?? ???????. ??? ????

? ?? ? ? ??? ?????. ???? ??

?????? ??? ??? ??? ? ?? ??? ????. ?????. ?? ????? ???? ??? ???? ???? ?? ????? ???? ????? ??? ?????.

?? ??? ??? ????? ??? ? ???? CSS ?? ??? ?? ??? CSS? ??, ?? ? ??? ??? ?????. ?? ??? ?? ?? ??? ?? ???? ????? ?? ??? ???? ?? ?? ?????. ?? ??, ??? ??? ? ???? : rotate3d (1, 1, 1, 45deg) : ?? : 1 1 45deg. ?????, ?? : 15% 10% 300px? Transform : Translate3d (15%, 10%, 300px) ? ??? : 1.5 1.5 3? ??? ????? : scale3d (1.5, 1.5, 3). ??? ??? ???? ?? ????? ??, ?? ?? ???? ??? ????? ?? ? ? ??????. ?? ?? ?? ??? ?? ???? ??? ??? ???? ?????. ??? ?? ???? ?? ??? ??? ?????. Firefox 60 ????? ??? ?? ??? ??? ????. skew, skewx ? skewy ?? ??? ??? ??? ????? ? ??? ??? ??? ?????. ?? ??? ?? ??

?????, ??? ??? ??? ??? ??? ?????, ??? ??? ??? ?? ?? ??? ?????.
?? ?? (SKEW, SKEWX ? SKEWY)? ???? ??? ?? ??? ?????. ??, ????? ? ???? ?? ??? ?? ?? ?? ???? ? ?? (??? ???)? ??? ????.

skewx ??? x ?? ?? ?? ???? ??? ???? (?? ?? ??). ?? ??????? ?? ??? ?????. ?? ?? ??? ???? ????? ?? ?? ??? ????? ??????. ?????, Skewy? ??? Y ?? ?? ?? ???? ????. ?? ??? ??? ??? ????? : Skewy (30deg). ???? ?????? ??? ?? ?? ???? ?? ????? ?????. ?? ??? ?? ?? ?????.

??? ?? ??? ?????. SKEW ???? ??? ?? ??? ????? ?? ? ?? ?? ??? ?? ? ? ????. ? ?? ?? ??? ??? X ???? ???? ? ?? ?? ??? ??? y ???? ?????. ??? ?? ?? ? ????, ? ?? ?? 0??? ???? X ???? ? ???? ?? ?????. ?? ??, Skew (45deg)? ??? ??? Skewx (45deg)? ?????.

?? ?? ???? ???? ??? ?? ??? ????? ????? ?? ? ?? ????. ??? ???? ???? ????? ?? ?? : ?? ??? ??????. ?? ?? :

??? ??? ??? ??? ?????.

?? ??? ??? ? ???? ???????. ??? ??? ?? ? ???? ???? ?? ?? ?????. ?? CSS? ??? ??? ?????.

?? ??? ?? ??? ?????.

??? ?? ???? ?? ???? ???????

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

?? (?? ??? ??)? ?? ????.

? ???? ?? ??? ???? ?? ?

?? ?? ????

? ????. ? ??? ??? ????? ?? ?? ? ??????. ??? ?? Matrix ? Matrix3D ??? ???? ? ??????.

?? ?? ? ?? ?? ??? ???? ?? ?? ?? ? ?? ?? ??????. ?? ??? ??? ?? 4 × 4 ??? ???? ??? ? ????.

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

? ??? 16 ?? ?? ??? ???? Matrix3d ????? ????, ? ?? ??? 4 × 4 ??? ?? ?????. 2 ?? ??? ?? ??? ?? 3 × 3 ??? ???? ??? ? ????.

? 3 × 3 ??? ?? ?? ??? ?????. matrix () ??? 6 ?? ?? ??? ????, ? ?? ??? ~ f ? ?????.

? ?? ??? ?? ? ?? ?? matrix3d ????? ???? ?? ? ? ????. ?? ??? scale3d ??? 4 × 4 ??? ?????. ?? ??.

?? (? : ?? : scale (2) translate (30px, 50px))? ???? ????? ? ??? ???? ? ??? ??? ????. ? ??? ????? ??? ???? ?????. ??? ???? ??? ??? ????. ?? ?? ? ? ????. ??? ?? ?? 3 × 2? ??? 2 × 3? ??? ?????. ??? ????? ?? ? ???? ??? b ? ?? ?? ? ??? ????. ?? ?? ?????. ?? (2) ?? (30px, 50px)? ???? ??? ?????. ??? ??? ? ?? ???? ???? ? ?? 60 ??? ??? ???? 100 ??? ???? ??????. ?? ???? ??? ?? ??? ??? ??? ? ???? : ?? : ???? (2, 0, 0, 2, 60, 100). ?? ??? ??? ??, ? ?? : ?? (30px, 50px) ?? (2)? ???????. ??? ??? ?? ????. > ??? ??? ??? ? ?? ????? ???????? ???? 30 ??? ????, 50 ??? ???? ?? ?????. ???? ??? ???? ??? ????? : ?? (2, 0, 0, 2, 30, 50).

?? ?? ??? ?? ??? ????? ?? ??? ??? ????. ? ??? ???? ???? ???? ?? ??? ????. ?? ?? ?? ??? ??????

??? ??? ?? ??? ?????. ? ?? ?? P ??? ?? ?? ??? ?????. ??? ???? 2 ?? ??? ??? ??? ???, ??? 3 ?? ???? ?????. 3 ??? ??? ??? ????. ?? ??? ??? ??? ??? ??? ???? ?????.

CSS? 2 ?? ?? ??? ?? ?? ?? ?? CSS? ?? ??? 2 ?? ?? ??? ??????

CSS?? ?? ??? 2 ?? ?? ??? ????. ???? translate (), rotate (), scale (), skew () ? matrix ()? ?????. ? ??? ???? ?? ???? ??? ?? ? ? ????. ?? ??, Translate () ??? ?? ???? ??? ???? rotate () ??? ??? ?? ???? ??? ??????. scale () ??? ??? ??? ???? skew () ??? x ?? y ?? ?? ??? ??????. Matrix () ??? ??? ?? ??? ??? ?????. CSS?? Translate () ??? ???? ??? ??????

CSS? TransLate () ??? ?? ???? ??? ???? ? ?????. x ? ?? y ? ?? ? ?? ?? ??? ????. ?? ??, ?? 50 ??? ?????, 20 ??? ??? ????? ?? ??? ??? ? ????. ?? (50px, 20px);. ??? ???? ?? ??? ????? ??? ??? ?? ??? ??? ??? ?????.

CSS?? ?? 2D ?? ??? ?? ? ? ?????

?, CSS?? ?? 2D ?? ??? ?? ? ? ????. ?????? ?? ??? ? ??? ???? ???? ??????. ?? ??, ??? ??? ? ?? ?? ? ?? 45? ????? ?? ??? ??? ? ????. ?? (2) ?? (45deg);. ??? ??? ??? ?????.

CSS?? matrix () ??? ??? ??????

CSS? Matrix () ??? ??? ?? ??? ?? ? ??? ?? ??? ?? ?????. 2 × 3 ??? ?? ???? 6 ?? ?? ??? ????. ? ????? ????, ??, ??? ? ?? ??? ??? ???? ? ?????. ?? ?? ???? ? ????? ?? ????? ?? ?? ??? ??? ?????.

skew () ??? CSS?? ??? ??????

CSS? Skew () ??? X ? ? Y ?? ?? ??? ??? ?? ?????. ???? ? ?? ?? ??? ????. X ?? ???? Y ?? ?? ??. ?? ??, ??? x ?? ?? 30?, Y ?? ?? 20? ????? ?? ??? ??? ? ????. ?? (30deg, 20deg);. ??? ??? ???? ?? ??? ????.

CSS? HTML ??? 2D ?? ??? ??? ? ?????

?, CSS? ?? HTML ??? 2D ?? ??? ??? ? ????. ???? ?? ?? ?? (? : DIV) ? ??? ?? (? : SPAN)? ?????. ??? ??? ???? ??? ?? ??? ????? ??? ?? ?? ? ????.

CSS?? Translate () ??? ??? ???? ??? ???????

CSS?? Trranslate () ??? ??? ???? ??? ??? ?? ?? ??? ?????. ??? ??? ???? : ?? (50, 20); ??? ????? ???? ???? ???? ?? ?? ??? ???? ?? ?? ????.

CSS? 2D ??? ??????? ??? ??????

?? ??? ???? CSS? 2D ??? ????? ? ? ????. ? ??? ???? ?? ??, ??? ?? ? ?? ??? ??? ? ????. ?? ??, 2 ? ?? ??? ???????? ?? ??? ??? ? ????. Transform : Transform : ?? (45deg); ??? ??? ?? ?? ??? ???? ????????.

CSS? rotate ()? skew () ??? ???? ??????

CSS? rotate () ? skew () ??? ?? ???? ???? ?????. ?? () ??? ??? ?? ??? ??? ????? ?? skew () ??? x ? y ?? ?? ??? ??????. ?? Rotate ()? ??? ??? ???? Skew ()? ??? ??? ?? ?? ?????.

CSS? ?? CSS ??? ?? 2D ?? ??? ??? ? ?????

?, ?? CSS ??? ?? CSS?? 2D ?? ??? ??? ? ????. ?? ??, Border-Radius ??? ?? ?? ??? ???? ?? ?????? ?? ??? ?? ? ????. ??? ??? ???? ??? ?? ??? ??? ????.