CSS rotate egenskab

Forrige side højre
Næste side row-gap

Definisjon og bruk

rotate Egenskapen lar deg rotere elementet.

rotate Egenskapen definerer en verdi som representerer graden av elementets rotasjon rundt z-aksen. For å rotere elementet rundt x-aksen, y-aksen eller på annen måte, må du gjøre tilsvarende definisjoner.

rotate Verdien til egenskapen kan være en vinkel, navn på aksen + vinkel, eller tre verdier + vinkel.

Hvis bare en vinkel gis, vil elementet rotere med klokka rundt z-aksen.
Hvis navnet på aksen + vinkel gis, vil elementet rotere med klokka rundt den angitte aksen.
Hvis tre verdier + vinkel gis, definerer disse tre verdiene en vektor, og elementet vil rotere rundt denne vektoren.

For å bedre forstå rotate egenskapen, seDemonstrasjon.

Bemerk:En annen teknikk for å rotere elementer er å bruke CSS rotate() funktion CSS transform egenskapen.

Eksempel

Eksempel 1

Endre elementets rotasjon:

div {
  rotate: 30deg;
}

Prøv selv

Eksempel 2

Når rotate Når egenskapen er satt til vektor og vinkel, vil elementet rotere rundt denne vektoren.

Her er vektoren [1 1 0] i todimensjonalt plan med x og y-koordinater, og deretter roterer 60 grader:

div {
  rotate: 1 1 0 60deg;
}

Prøv selv

CSS syntax

rotate: aks vinkel|initial|inherit;

Egenskapsverdi

Verdi	Beskrivelse
aks	Valgfritt. Hvis ikke satt, er standardverdien z-aksen. Definerer aksen elementet roterer rundt. Mulige verdier: x y z
vinkel	Definerer elementets rotasjonsgrad. Mulige enheter: deg(/deg) rad(/rad) turn(/)
vektor vinkel	Disse tre tallene definerer en vektor, og elementet vil rotere rundt denne vektoren. Disse tre tallene er vektorens x, y og z-koordinater. Siste verdi er rotasjonsvinkelen. Mulige verdier: tall tall tall vinkel
initial	Sett denne egenskapen til standardverdien. Se: initial.
inherit	Arver denne egenskapen fra sin overordnede element. Se: inherit.

Teknisk detalj

Standardverdi:	ingen
Arv:	Nei
Animasjonsproduksjon:	Støttet. Se:Animasjonsrelaterte egenskaper.
Versjon:	CSS3
JavaScript syntax:	object.style.rotate="-120deg"