CSS preoblikovanja (Transform) omogočajo spreminjanje oblike in položaja elementov brez vpliva
na okoliške elemente. Z 2D preoblikovanji lahko elemente premaknemo (translate),
zavrtimo (rotate), spremenimo velikost (scale) in nagnemo (skew).
Z 3D preoblikovanji dodamo še globino – elemente lahko vrtimo okoli X in Y osi ter ustvarimo realistične prostorske
učinke s pomočjo lastnosti perspective.
CSS prehodi (Transition) omogočajo gladke spremembe med dvema stanjema elementa – na primer, ko
uporabnik premakne miško čez gumb (:hover). Namesto nenadne spremembe se lastnost prehaja postopoma
čez določen čas. Prehodi so preprosti za uporabo in ne zahtevajo znanja JavaScripta.
CSS animacije (Animation) pa še korak dlje: omogočajo zapletene zaporedne spremembe sloga,
definirane s ključnimi sličicami (@keyframes). Z njimi lahko ustvarimo gibanje, ki se
ponavlja, traja poljubno dolgo in vsebuje poljubno mnogo vmesnih točk. Animacije imajo tri ključne prednosti: so
preproste za uporabo, ne potrebujejo JavaScripta in jih brskalnik lahko optimizira za boljšo zmogljivost – tudi
kadar je zavihek v ozadju.
| Lastnost | Primer | Opis |
|---|---|---|
| 2D Preoblikovanja (Transform) | ||
translate(x, y) | transform: translate(50px, 100px); |
Premakne element vzdolž X in Y osi |
translateX(n) | transform: translateX(50px); |
Premakne element vzdolž X osi |
translateY(n) | transform: translateY(100px); |
Premakne element vzdolž Y osi |
rotate(kot) | transform: rotate(45deg); |
Zavrti element za določen kot |
scale(x, y) | transform: scale(2, 1.5); |
Spremeni velikost elementa (širina, višina) |
scaleX(n) | transform: scaleX(2); |
Spremeni širino elementa |
scaleY(n) | transform: scaleY(1.5); |
Spremeni višino elementa |
skew(x-kot, y-kot) | transform: skew(20deg, 10deg); |
Nagne element vzdolž X in Y osi |
skewX(kot) | transform: skewX(20deg); |
Nagne element vzdolž X osi |
skewY(kot) | transform: skewY(10deg); |
Nagne element vzdolž Y osi |
matrix(n,n,n,n,n,n) | transform: matrix(1,0,0,1,50,100); |
2D preoblikovanje z 6 vrednostmi (napredno) |
| 3D Preoblikovanja (Transform) | ||
perspective(n) | perspective: 500px; |
Določi globino perspektive za 3D učinek |
translate3d(x, y, z) | transform: translate3d(50px, 0, 100px); |
Premakne element v 3D prostoru |
translateZ(z) | transform: translateZ(100px); |
Premakne element vzdolž Z osi (globina) |
rotateX(kot) | transform: rotateX(60deg); |
Vrti element okoli X osi (horizontalno) |
rotateY(kot) | transform: rotateY(60deg); |
Vrti element okoli Y osi (vertikalno) |
rotateZ(kot) | transform: rotateZ(45deg); |
Vrti element okoli Z osi (enako kot 2D rotate) |
rotate3d(x, y, z, kot) | transform: rotate3d(1, 1, 0, 45deg); |
Vrti element okoli poljubne 3D osi |
scale3d(x, y, z) | transform: scale3d(1.5, 1.5, 2); |
Spremeni velikost v 3D prostoru |
scaleZ(z) | transform: scaleZ(2); |
Spremeni velikost vzdolž Z osi |
matrix3d(...) | transform: matrix3d(...); |
3D preoblikovanje z 16 vrednostmi (napredno) |
transform-style | transform-style: preserve-3d; |
Ohrani 3D prostor za podrejene elemente |
backface-visibility | backface-visibility: hidden; |
Skrije ali pokaže zadnjo stran elementa |
| Prehodi (Transition) | ||
transition | transition: all 0.3s ease; |
Skrajšana lastnost za vse transition vrednosti |
transition-property | transition-property: transform; |
Določi, katera lastnost se prehaja |
transition-duration | transition-duration: 0.5s; |
Določi trajanje prehoda |
transition-timing-function | transition-timing-function: ease-in-out; |
Določi krivuljo hitrosti (ease, linear, ease-in, ease-out, ease-in-out) |
transition-delay | transition-delay: 0.2s; |
Določi zamik pred začetkom prehoda |
| Animacije (Animation) | ||
@keyframes | @keyframes ime { from {} to {} } |
Definira ključne sličice animacije |
animation | animation: ime 2s ease infinite; |
Skrajšana lastnost za vse animation vrednosti |
animation-name | animation-name: premik; |
Določi ime animacije (povezava z @keyframes) |
animation-duration | animation-duration: 2s; |
Določi trajanje enega cikla animacije |
animation-timing-function | animation-timing-function: ease; |
Določi krivuljo hitrosti animacije |
animation-delay | animation-delay: 1s; |
Določi zamik pred začetkom animacije |
animation-iteration-count | animation-iteration-count: infinite; |
Določi število ponovitev (število ali infinite) |
animation-direction | animation-direction: alternate; |
Določi smer predvajanja (normal, reverse, alternate, alternate-reverse) |
animation-fill-mode | animation-fill-mode: forwards; |
Določi slog elementa po koncu animacije (none, forwards, backwards, both) |
animation-play-state | animation-play-state: paused; |
Ustavi ali nadaljuje animacijo (running, paused) |
