transform css3
10 
16 
45 
12.1
Siden er opdateret d. 5. 9. 2015
Egenskaben transform fungerer ikke i Chrome og Safari med valid kode. Hvis du foran egenskaben tilføjer den ikke-valide kodestump -webkit- så du ender med -webkit-transform: [værdi]; kan også disse browsere også være med.
Med transform kan man dreje eller vride en boks eller klemme eller strække den.
div#demo {
width:200px;
height:100px;
background-color:yellow;
transform: rotate(10deg);
}
vil se sådan ud :
Noget tekst
Disse værdier sat på transform, har følgende funktioner:
- translate
- Med transform:translate(15px,30px); flyttes en boks 15 pixels mod højre og 30 pixels ned. Negativ værdi på første plads flytter boksen mod venstre. Negativ værdi på anden plads flytter boksen op.
- translateX
- Med transform:translateX(25px); flyttes en boks 25 pixels mod højre. Med negativ værdi flyttes boksen mod venstre.
- translateY
- Med transform:translate(25px); flyttes en boks 25 pixels ned. Med negativ værdi flyttes boksen op.
- scale
- Med transform:scale(1.2,1.2); strækkes en boks på begge leder til 1,2 gange normalstørrelse. Med en værdi minde end 1 (eks. 0.8) på første plads klemmes boksen sammen horisontalt (vandret - bliver smallere). Med værdi mindre end 1 på anden plads klemmes boksen vertikalt (lodret - bliver lavere). Bemærk, at der benyttes engelsk/amerikansk decimaladskiller dvs. punktum. Den skalerede boks' centerpunkt ligger fast i forhold til den uskalerede boks'.
- scaleX
- Med transform:scaleX(1.2); strækkes en boks hosontalt. Med en værdi lavere end 1 klemmes boksen sammen (bliver smallere).
- scaleY
- Med transform:scaleY(1.2); strækkes en boks vertikalt. Med en værdi lavere end 1 klemmes boksen sammen (bliver lavere).
- rotate
- Med transform:rotate(5deg); drejes en boks 5 grader med uret omkring boksens centerpunkt. Der kan kun drejes med uret - 350deg svarer så til 10 grader mod uret.
- rotateX
- Med transform:rotateX(30deg); drejes en boks 30 grader om en vandret akse midt i boksen. Ved 180deg vendes boksen på hovedet.
- rotateY
- Med transform:rotateY(30deg); drejes en boks 30 grader om en lodret akse midt i boksen. Ved 180deg spejlvendes boksen.
- rotateZ
- Med transform:rotateZ(30deg); drejes boksen på samme måde som ved transform:rotate(30deg);.
- skew
- Med transform:skew(10deg,10deg); skævvrider boksen både vandret og lodret efter bestemmelserne beskrevet i de to næste punkter.
- skewX
- Med transform:skewX(10deg); skævvrider boksen 10 grader om en horisontal midterakse (venstre og højre side væltes) - toppen trækkes mod venstre og bunden skydes mod højre ved angivelse under 90 grader.
- skewY
- Med transform:skewY(10deg); skævvrider boksen 10 grader om en vertikal midterakse (toppen og bunden tiltes) - venstre side løftes og højreside sænkes ved angivelse under 90 grader.
-
