Tekst in spiegelbeeld zetten
Als je met de muis over deze tekst-alinea heen gaat, gaat de tekst in spiegelbeeld staan. Het effect verdwijnt als de muis verschuift buiten deze alinea. Iets dergelijks treedt op bij de volgende alinea; daar gaat de tekst op zijn kop staan. Ergens anders op deze pagina gaat de tekst in spiegelbeeld én ondersteboven staan.
Dit kun je gebruiken om je bezoekers te plagen en/of weg te jagen. Pas er dus wel een beetje mee op, want het is gemakkelijker je bezoekers af te schrikken dan ze vast te houden.
Op deze pagina laat ik zien hoe je dit kunt aanpakken. De code is zo eenvoudig dat downloaden niet zinvol is.
- De code bestaat uit HTML en wat CSS. Voor het effect wordt JavaScript ingezet, via de event-handlers onmousover en onmouseout.
- De CSS omvat drie klassen, waarvan de namen voor zichzelf spreken (zie ook de code onderaan de bladzijde_:
- Spiegelbeeld Een HTML-element dat deze klasse heeft wordt 180° om de verticale (Y-)as van het scherm gedraaid.
- Ondersteboven Een HTML-element dat deze klasse heeft wordt 180° om de horizontale (X-)as van het scherm gedraaid.
- Allebei Een HTML-element dat deze klasse heeft wordt 180° om de horizontale (Z-)as loodrecht op het scherm gedraaid.
- Voor het toevoegen van de klassen
aan de HTML-elementen wordt de methode addClass() uit de bibliotheek W3.JS
gebruikt.
Voor het verwijderen van de klassen uit de HTML-elementen wordt de methode removeClass() uit de bibliotheek W3.JS gebruikt.
W3.JS is een ontwikkeling van w3schools.com. Zie ook het item W3.JS: wat het is en hoe je het kunt gebruiken.
- Om dit in je eigen webpagina in te bouwen maak je code zoals hieronder is getoond. W3.JS kun je downloaden van https://www.w3schools.com/lib/w3.js.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.Spiegelbeeld { transform:rotateY(180deg) }
.Ondersteboven {transform:rotateX(180deg)}
.Allebei {transform:rotateZ(180deg)}
</style>
<script src="w3.js"></script>
(Hieronder voorbeelden van <BODY>-elementen die het effect hedben).
<p onmouseover="w3.addClass(this,'Spiegelbeeld')"
onmouseout="w3.removeClass(this,'Spiegelbeeld')">Als je met
de muis over deze tekst-alinea heen gaat ... ondersteboven
staan.</p>
<p onmouseover="w3.addClass(this,'Ondersteboven')"
onmouseout="w3.removeClass(this,'Ondersteboven')">Dit kun
je gebruiken om ... ze vast te houden.</p>
<li onmouseover="w3.addClass(this,'Allebei')"
onmouseout="w3.removeClass(this,'Allebei')">Voor het
toevoegen van de klassen ... gebruikt.</li>
