tapeta Moderního Webu

origin a duration

3D
2D

origin a duration

CSS3 vlastnosti origin a transition-duration dohromady vytváří efekt plynulého otočení elementu.

Příklad:

div:hover {
  transform: rotate(360deg);
  transform-origin: 90% 90%;
  transition-duration: 1.2s;  
}

Na závěr jsem si asi dovolil trošku víc.

Vlastnost "transition-origin" se zobrazí jen v případě rotace objektu.

Tato vlastnost určuje střed rotace dle souřadnic x a y (90% 90%). Dají se použít i jiné hodnoty než %.

A jako třešničku jsem přidal i vlastnost "transition-duration", která určuje dobu přechodu.

Dají se použít i další vlastnosti přechodu. Jsou úplně stejné jako u animací. Jen se zamění animation za transition.


moderniweb.com © 2017