Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Transformacje i animacje CSS

transform-origin


transform-origin: 20% 20%;

Podstawowe moduły 2D translate

scale
wykorzystywana do skalowania elementu (jego powiększania i zmniejszania)

transform: scale(0.5);
  
translate
przemieszcza element na ekranie (przyjmuje np. parametry down, left i right)

transform: translate(40px, 0px);
  
rotate
obraca elementy o określoną liczbę stopni

transform: rotate(90deg);
  
skew
przekrzywia element w oparciu o współrzędne X i Y

transform: skew(10deg, 2deg);
transform: skew(10deg);
  
matrix
pozwala Ci na przemieszczanie i zmianę kształtu elementu z dokładnością co do piksela

transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
  

Podstawowe moduły 3D translate

Do uzupełnienia

Sekcja do uzupełnienia.

Animacje

W3C Standards

W3C - CSS3 Animations

@keyframes


@keyframes warning {
  0% {
    text-shadow: 0px 0px 4px #FFFF0A;
  }
  50% {
    text-shadow: 0 0 20px #FFFF0A;
  }
  100% {
    text-shadow: 0px 0px 4px #FFFF0A;
  }
}

x {
  animation: warning 1.5s infinite ease-in;
}