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
@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;
}