transform, transition og animation - CSS

CSS transform, transition og animation er spændende ny CSS kode hvor man kan ændre udseende, lave overgange og animere dele af hjemmesiden

Introduktion

CSS transform kan ændre udseendet på elementer. Man kan flytte, skalere, rotere og gøre skrå.

Tekst med CSS
Transform



CSS transition kan få et element til gradvist at ændre sig fra en tilstand til en anden i en flydende bevægelse.

Prøv og hold markøren her
Transition



CSS animation kan animere elementer.

Doraemon

Transform translate demo

translateX(x)

Doraemon

translateY(y)

Doraemon

translate(x,y)

Doraemon

translate3d(x,y,z)1

Doraemon
1 Virker ikke i Opera 12.10 og Internet Explorer 9.

Transform scale demo

scale()

Doraemon

scale()

Doraemon

scale(x,y)

Doraemon

scale3d(?)1

Doraemon
1 Virker ikke i Opera 12.10 og Internet Explorer 9.

Transform skew demo

skewX(x)

Doraemon

skewY(y)

Doraemon
skew() er ifølge Mozilla ikke en del af standarden selvom den virker i både Firefox, Opera, Safari, Chrome og Internet Explorer. Brug skewX() og skewY() i stedet skriver Mozilla.

Transform rotate demo

rotatex(x)1

Doraemon

rotatey(y)1

Doraemon

rotatez(z)1

Doraemon

rotate(x+y+z)

Doraemon

rotate3d(x,y,z,deg)2

Doraemon
rotatex roter om X akslen - venstre-højre
rotatey roter om Y akslen - op-ned
rotatez roter om Z akslen - bagved-foran

1 Virker ikke i Internet Explorer 9.

2 Virker ikke i Opera 12.10. Læg mærke til at x, y, z er <number> som er tal uden angivelse af enhed. Altså rotate3d(1, 2.0, 3.0, 10deg) er gyldigt men rotate3d(10px, 10px, 10px, 10deg) er ikke gyldigt.

Rotozoom demo

rotator
CSS ROTOZOOM DEMO
CSS ROTOZOOM DEMO 2
CSS + SVG ROTOZOOM DEMO

Video demo

TRANSFORM TRANSITION VIDEO DEMO

Skift mellem to billeder demo

Her er et eksempel hvor der vises et baggrundsbillede.
Baggrundsbilledet ændres når markøren holdet over området og det er så mening at der skal fades mellem de 2 billeder.
Det virker i skrivende stund kun i Chrome men jeg har gjort så bredden også ændres så man kan se det virker i andre browsere bortset fra der klippes hårdt fra det ene billede til det andet.
SKIFT MELLEM TO BILLEDER MED CSS DEMO

Vent venligst... demo

Her er en animation man kunne bruge når brugeren skal vente på en progress.
Vent venligst...
VENT VENLIGST... DEMO

Julekugle animation

julekugle
JULEKUGLE ANIMATION DEMO

Rum rejse demo

Transform demo

Her er en iframe som er ændret med CSS.
Virker ikke ens i alle browserne.

CSS TRANSITION + TRANSFORM + PERSPECTIVE + IFRAME DEMO

background-position og transition demo

Her ses et billede med 2 pile.
pil

Billedet kan bruges som baggrundsbillede i et element som har den halve bredde af billedet.
Når markøren holdes over elementet kan baggrundsbilledet flyttes til siden med background-position.

(Prøv og hold markøren over billedet)

I stedet for at få et hårdt flyt af baggrundsbilledet kan man bruge CSS transition til at får en flot glidende bevægelse.

(Prøv og hold markøren over billederne)

Browserunderstøttelse af CSS transform og transition

Browser Transform og transition understøttelse Property Transform værdier
Firefox logo
Firefox 16.0.2
ja transform
transition
translateX(x)
translateY(y)
translate(x,y)
translate3d(x,y,z)
scale()
scale(x,y)
scale3d(?)
skewX(x)
skewY(y)
rotatex(x)
rotatey(y)
rotatez(z)
rotate(x+y+z)
rotate3d(x,y,z,deg)
Opera logo
Opera 12.10 2
ja transform
transition
-o-transform
-o-transition
-webkit-transform
-webkit-transition
translateX(x)
translateY(y)
translate(x,y)
translate3d(x,y,z)
scale()
scale(x,y)
scale3d(?)
skewX(x)
skewY(y)
rotatex(x)3
rotatey(y)
rotatez(z)1
rotate(x+y+z)
rotate3d(x,y,z,deg)
Safari logo
Safari 5.1.7
ja -webkit-transform
-webkit-transition
translateX(x)
translateY(y)
translate(x,y)
translate3d(x,y,z)
scale()
scale(x,y)
scale3d(?)
skewX(x)
skewY(y)
rotatex(x)
rotatey(y)
rotatez(z)
rotate(x+y+z)
rotate3d(x,y,z,deg)
Chrome logo
Chrome 23.0.1271.64 m
ja -webkit-transform
-webkit-transition
translateX(x)
translateY(y)
translate(x,y)
translate3d(x,y,z)
scale()
scale(x,y)
scale3d(?)
skewX(x)
skewY(y)
rotatex(x)
rotatey(y)
rotatez(z)
rotate(x+y+z)
rotate3d(x,y,z,deg)
Internet Explorer logo
Internet Explorer 10.0.9200.16438 Pre-Release
ja transform
transition
-ms-transform
-ms-transition
translateX(x)
translateY(y)
translate(x,y)
translate3d(x,y,z)
scale()
scale(x,y)
scale3d(?)
skewX(x)
skewY(y)
rotatex(x)
rotatey(y)
rotatez(z)
rotate(x+y+z)
rotate3d(x,y,z,deg)
Alle tests er udført på Windows 7 (64-bit)


Nogle af -webkit- koderne ser kun ud til at virke på block elementer (div) men ikke på inline elementer (span).
Firefox ser ud til at ville lave transform rotate på block elementer men ikke på inline elementer.

Safari og Chrome har lidt mærkelig opførsel med :hover hvor :hover koden først aktiveres hvis musen er ved den nederste halvdel af billedet med rotatex() og først når musen er ved den venstre halvdel ved rotatey(). rotatez() aktiveres på hele billedet. Om det er øverste/nederste eller højre/venstre halvdel der er click-bar kommer an på hvor meget elementet er roteret ligesom et stykke papir som ligger på overfladen af vand også det roteres på midten så vil halvdelen være over vandet (click-bart) og den anden halvdel vil være under vandet (ikke click-bart).

1 rotatez() virker ikke i Opera 12.10 men man kan bruge rotate() i stedet.

2 Opera 12.10 crasher meget hvis der er mange CSS transform, transition, animation koder på siden. CSS prefix koderne er lavet om fra 12.02 til 12.10 så nu kan jeg ikke nøjes med at angive rotate() som Opera forstår kun til den browser. Så selvom mine eksempler virkede i Opera 12.02 virker de nu ikke mere i Opera 12.10. -o-keyframes ser ikke ud til at virke i opera 12.10 så jeg kan ikke lave det til at virke i Opera.

3 Opfører sig ikke som i andre browsere. Måske noget med origin (-o-transform-origin: left top;) som bestemmer hvordan der skal roteres.
Browserunderstøttelse fra caniuse.com :

Browserunderstøttelse fra caniuse.com :

Browserunderstøttelse fra caniuse.com :

Browserunderstøttelse fra caniuse.com :

Browser prefixes

Da CSS3 transform, transition og animation er så ny og specifikationerne ikke er på plads endnu så skal man indtil videre bruge browser prefixes for at det skal kunne virke.

Browser prefixes betyder at man i stedet for at skrive for eksempel transform så vil man i Internet Explorer skrive -ms-transform.

Det giver en masse ekstra kode men det er kun midlertidigt indtil engang hvor alle browserne understøtter koden uden prefixes.

CSS transform fra JavaScript

Her ses hvordan man sætter CSS transform fra JavaScript.

Sub properties forklaring

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.