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.

-

Valid XHTML og CSS / Copyright © Erik Ginnerskov august 2013
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - transform
sidens top
Brugere lige nu: 1
Home Mail