Elementen Roteren in 2D en 3D
We kunnen de functie rotate() gebruiken om elementen te roteren. Positieve waarden roteren het element met de klok mee, terwijl negatieve waarden het tegen de klok in roteren. De rotatiehoek wordt meestal opgegeven in graden (deg), waarbij de standaardwaarde 0deg aangeeft dat er geen rotatie is. Andere toegestane eenheden voor rotatiehoeken zijn turns (turn) en radialen (rad).
Elementassen
Om te begrijpen hoe rotatie werkt, is het belangrijk het concept van elementassen te begrijpen. Er zijn drie assen:
- De x-as is horizontaal en loopt van links naar rechts;
- De y-as is verticaal en loopt van boven naar beneden;
- De z-as staat loodrecht op het scherm en wijst naar de kijker toe.
Rotatierichting
Standaard roteert de eigenschap rotate() het element rond de z-as. Het is echter ook mogelijk om rotatie toe te passen rond de x-as en y-as met de volgende waarden:
transform: rotateX(angle);
transform: rotateY(angle);
Voorbeeld 1
Bekijk de volgende voorbeeldcode, waarin verschillende rotatiehoeken worden toegepast om rotatie rond de z-as te demonstreren:
index.html
index.css
Voorbeeld 2
In dit voorbeeld onderzoeken we rotatie rond de z-as, x-as en y-as:
index.html
index.css
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04Elementen Roteren in 2D en 3D
Veeg om het menu te tonen
We kunnen de functie rotate() gebruiken om elementen te roteren. Positieve waarden roteren het element met de klok mee, terwijl negatieve waarden het tegen de klok in roteren. De rotatiehoek wordt meestal opgegeven in graden (deg), waarbij de standaardwaarde 0deg aangeeft dat er geen rotatie is. Andere toegestane eenheden voor rotatiehoeken zijn turns (turn) en radialen (rad).
Elementassen
Om te begrijpen hoe rotatie werkt, is het belangrijk het concept van elementassen te begrijpen. Er zijn drie assen:
- De x-as is horizontaal en loopt van links naar rechts;
- De y-as is verticaal en loopt van boven naar beneden;
- De z-as staat loodrecht op het scherm en wijst naar de kijker toe.
Rotatierichting
Standaard roteert de eigenschap rotate() het element rond de z-as. Het is echter ook mogelijk om rotatie toe te passen rond de x-as en y-as met de volgende waarden:
transform: rotateX(angle);
transform: rotateY(angle);
Voorbeeld 1
Bekijk de volgende voorbeeldcode, waarin verschillende rotatiehoeken worden toegepast om rotatie rond de z-as te demonstreren:
index.html
index.css
Voorbeeld 2
In dit voorbeeld onderzoeken we rotatie rond de z-as, x-as en y-as:
index.html
index.css
Bedankt voor je feedback!
