CSS rotate eigenschap

Vorige pagina Rechts
Volgende pagina row-gap

Definitie en gebruik

draai De eigenschap laat je toe om een element te draaien.

draai De eigenschap definieert een waarde die het draaihoek van het element om de z-as in de klokrichting aangeeft. Om een element om de x-as, y-as of op andere wijze te draaien, moet een passende definitie worden gegeven.

draai De waarde van de eigenschap kan een hoek, naam van de as + hoek, of drie waarden + hoek zijn.

Als alleen een hoek wordt gegeven, zal het element met de z-as in de klokrichting draaien.
Als de naam van de as + hoek wordt gegeven, zal het element met de gegeven as in de klokrichting draaien.
Als drie waarden + hoek worden gegeven, definiëren deze drie waarden een vector, waarrond het element zal draaien.

Om beter te begrijpen draai eigenschappen, zieDemonstratie.

Opmerking:Een ander techniek om een element te draaien is met behulp van CSS rotate() functie van de CSS transform eigenschap.

voorbeeld

Voorbeeld 1

Wijzig de draai van het element:

div {
  rotate: 30deg;
}

Probeer het zelf

Voorbeeld 2

wanneer draai Wanneer de eigenschap ingesteld is op vector en hoek, zal het element om de vector draaien.

Hier is de vector [1 1 0] in het tweedimensionale vlak, met x- en y-coördinaten, en dan draait 60 graden:

div {
  rotate: 1 1 0 60deg;
}

Probeer het zelf

CSS syntax

rotate: as hoek|initial|inherit;

eigenschapswaarde

waarde	beschrijving
as	optioneel. Als niet ingesteld, is de standaardwaarde de z-as. Definieert de as waarom het element zal draaien. x y z
hoek	Definieert het draaihoek van het element. Mogelijke eenheden: deg（graden) rad（radianen) keer（cirkel)
vector hoek	Deze drie getallen definiëren een vector, waarrond het element zal draaien. Deze drie getallen zijn de x, y en z-coördinaten van het vector. De laatste waarde is het draaihoek. Mogelijke waarden: getal getal getal hoek
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde:	none
Inheritantie:	nee
Animatie maken:	ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntax:	object.style.rotate="-120deg"