CSS ?? ??? ?? ??? ??? ??? ?? ??? ??, ???, ??? ? ???? ? ?????. ?? ??? transform : rotate (), scale (), translate () ? skew ()? ?? ?? ????. ?? ??? ???? ???? ????? ???? ???? ?????. ?? ? ??? ?? Translate? GPU? ?? ????? ?????? ? ???? ??? ?????. Transform-Origin? ???? ?? ???? ???? ?? ??? ???? ?? 2 ~ 3 ?? ???????. ?? ?? ??? ?? ??? ??? ???? ?? ?? ??? ??? ???????????. ??? ?? ???? ????? ???? ??? ??? ??? ?????.

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

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

transform ??? ?? ??? ??? ????? ?? ??? ???? ??? ??????. ?? ?? ??? ??? ????.

 ?? : ?? (30deg) ??? (1.5);

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

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

• rotate() —— ??
• scale() - ???
• translate() —— plant
• skew() —— tilt

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

 ?? : ?? {
  ?? : ?? (5deg) ??? (1.1);
}

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

?? ???? ??? ?? ????. translate ??? ??? ? ?? ??? ??? position: absolute; top: xx; left: xx ?

???, ??? ??? ??? ???? ?? ????? ????. translate GPU ???? ?????, ?? ?????? ? ???? ???? ? ????. top ? left ??? ???? ? ??, ??? ?? ?????.

?? ??, ???? ?????? ???? translate ???? top ??? ?? ???? ??? ? ?????.

 .slide-in {
  ?? : Translatey (-20px);
  ???? : 0;
  ?? : ?? 0.3 ?? ???;
}

.slide-in.active {
  ?? : Translatey (0);
  ???? : 1;
}

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

??-??? ?? ?? ???? ??????

????? ??? ??? ?? ?? ???? ?????. ??? ?? ?? ??? ???? ????? ?? ???? ????? transform-origin ??? ???????.

?? ??:

 .?? {
  ?? : ?? (45deg);
  ??-??? : ?? ??;
}

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

?? ??? ???? ?? 2 ~ 3 ?? ?? ??? ? ????.

• transform-origin: 50% 50% (??, ??)
• transform-origin: left bottom
• transform-origin: 10px 20px

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

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

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

?? ??:

 ?? : ?? (30deg) translatex (100px);

??? 100px? ?? ????? ?? ? ?? ?? 30?? ????? ????. ? ???? ??? ??? ??? 100px? ????? ???? ?? ??? ?? ?? ??? ??? ?????? ?? ?? ? ????.

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

 ?? : translatex (100px) ?? (30deg);

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

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

? ??? CSS ?? ??? ???? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!