Plaatje omdraaien met 3D-effect
Hieronder zie je een plaatje. Als je er met de muis overheen gaat, wordt het omgedraaid. Als de muis het plaatje verlaat
wordt het teruggedraaid.
Op een aanraakscherm tik je op de foto resp. buiten de foto.
Op deze bladzijde wordt uitgelegd hoe je dat doet. De code kun je downloaden om zelf te gebruiken, echter zonder de plaatjes. Daar moet je zelf voor zorgen.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit HTML en CSS. Er komt geen JavaScript aan te pas.
- De HTML bestaat uit geneste <div>-tags, elk met een eigen class.
- De buitenste, met class="plaatje", zorgt voor de positionering op de pagina.
- Binnen plaatje staan twee andere div-tags, de een heeft class="voorkant", de andere heeft class="achterkant".
- Binnen elk van deze div's staat een plaatje. De een is de voorkant, de andere is de achterkant.
Bij het laden van de pagina wordt de 'achterkant' omgedraaid. Dat gebeurt met transform: rotateY(180deg).
- Als de muis boven het plaatje komt, wordt er een transformatie uitgevoerd op zowel de voorkant als de achterkant:
De voorkant wordt om de Y-as gedraaid naar 180°. Tegelijkertijd wordt de De achterkant wordt om de Y-as gedraaid naar 0°. - Om te voorkomen dat de plaatjes gespiegeld zichtbaar zijn, hebben beide plaatjes de eigenschap backface-visibility: hidden;.
- Het "omkeren" van het plaatje duurt 1 seconde en gaat met ease-in-out.
- Toepassen in je eigen site
- Bouw de code op zoals hieronder is aangegeven.
- Neem twee verschillende plaatjes. Die moeten wel even groot zijn.
- Maak de height en width van de klasse plaatje gelijk aan de afmetingen van de foto.
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>
.plaatje {
position: relative;
margin: 20px auto 30px auto;
width: 250px;
height: 187px;
}
.achterkant { transform: rotateY(180deg); }
.voorkant, .achterkant {
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease-in-out;
}
.plaatje:hover .voorkant { transform: rotateY(180deg); }
.plaatje:hover .achterkant { transform: rotateY(0); }
</style>
(Zet dit in de <BODY> op de plaats waar het plaatje moet verschijnen).
<div class="plaatje">
<div class="achterkant">
<img src="achterzijde.jpg">
</div>
<div class="voorkant">
<img src="voorzijde.jpg">
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb509.zip, 474 bytes.
Opmerking:
Zie het item 3D-rotatie-effect met plaatjes voor iets vergelijkbaars.
