CSS transforms VS transitions [zamknięty]

transition i transform są oddzielnymi właściwościami CSS, ale możesz dostarczyć transform do transition, aby "ożywić" transformację.

transition

Właściwość CSS transition nasłuchuje zmian w podanych właściwościach (tło-kolor, szerokość, wysokość, itp.) z czasem.

transition Składnia Właściwości:

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

Na przykład, poniższe style zmienią kolor tła div na pomarańczowy w okresie 1 sekundy po unoś się.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified */
}
div:hover {
  background-color: orange;
}

<div></div>

transform

Właściwość CSS transform obraca/skaluje/pochyla element nad osiami X,Y lub Z. Jego zachowanie nie odnosi się do transition. Mówiąc najprościej, przy załadowaniu strony element będzie po prostu wyświetlany obrócony/przekrzywiony / skalowany.

Teraz, jeśli chcesz, aby stało się obracanie/pochylanie/skalowanie, powiedzmy, gdy użytkownik zawisł nad elementem, musisz "przejść ""transformację".

Oto jak: od transition funkcjonalnością właściwości jest nasłuchiwanie zmian w innych właściwościach css, w rzeczywistości można podać transform jako argument transition i "ożywić" transformację na podstawie żądanego wyzwalacza(na przykład akcja najazdu).

transform Składnia Właściwości

select {
    transform: [rotate] [skew] [scale] [translate] [perspective]
}

Na przykład, poniższe style będą obracać div przez okres 1 sekundy po najechaniu kursorem.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s;
  /* timing function and delay not specified */
}
div:hover {
  transform: rotate(30deg);
}

<div></div>