3D-rotatie-effect met plaatjes
Hieronder zie je een foto. Die ligt bovenop een andere foto, maar die zie je nu niet. Als je er met de muis overheen gaat
draait de bovenste foto over 90° en verschijnt de achterste foto. Op deze pagina wordt uitgelegd hoe je dat doet.
Op een aanraakscherm tik je op de foto resp. buiten de foto.
De code kun je downloaden om zelf te gebruiken, alleen zonder de foto's. 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="voorste", de andere heeft class="achterste".
- Binnen elk van deze div's staat een plaatje. In dit voorbeeld is de roos de voorste en is de paddestoel
de achterste.
- Als de muis boven het plaatje komt, wordt er een transformatie uitgevoerd op de voorste: Deze wordt om de Y-as gedraaid naar 90°. Hierdoor wordt de achterste zichtbaar.
- Omdat het plaatje geen dikte heeft, zie je er helemaal niets meer van als het plaatje over 90° is gedraaid.
- Het "draaien" van het plaatje duurt ½ 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;
}
.voorste, .achterste {
position: absolute;
transition: transform 0.5s ease-in-out;
}
.plaatje:hover .voorste { transform: rotateY(90deg); }
</style>
(Zet dit in de <BODY> op de plaats waar het plaatje moet verschijnen).
<div class="plaatje">
<div class="achterste">
<img src="achterstefoto.jpg">
</div>
<div class="voorste">
<img src="voorstefoto.jpg">
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb511.zip, 438 bytes.
Opmerking:
Zie het item Plaatje omdraaien met 3D-effect voor iets dat hier op lijkt.
