Google Maps ontvouwd in 3D CSS

Google heeft vandaag haar browser Chrome geupdatet naar versie 12. Één van de leukste dingen die ze hebben toegevoegd wat ons betreft, is hardware acceleratie voor 3D-CSS-effecten. Dit zegt je waarschijnlijk niet zoveel, maar wij hebben er alvast even mee geëxperimenteerd en een voorbeeld online gezet zodat je kunt zien wat er mogelijk is.

In het experiment wilden we een Google Maps kaart een opgevouwen effect geven zoals een echte papieren kaart. Ook hebben we een animatie gemaakt waarbij de kaart uitvouwt. Alles effecten zijn in 3D en door de nieuwe hardware acceleratie van Chrome 12 loopt het ook nog eens soepel. We hadden een paar jaar geleden nooit kunnen denken dat dit op internet zou kunnen. Je kunt het voorbeeld hier bekijken. Als je geen Chrome hebt, moet je dat wel even installeren uiteraard.

Nerd-alert: een korte verklaring van wat je ziet. Er wordt Google Maps geladen in een container met een opacity van 0. De inhoud van deze container wordt met behulp van jQuery gekloond en gekopieerd naar de zes kaartdelen. Door ieder kaartdeel een andere margin-left te geven lijkt het geheel nog steeds één kaart. Met de CSS 3D transformaties rotateX en rotateY kunnen we nu vervolgens de kaart kantelen in de 3D-ruimte. Door hier vervolgens nog wat jQuery en simpele goniometrie op los te laten animeren we een langzaam ontvouwende Google Maps.

We houden erg van de laatste snufjes op het internet en innoveren graag mee. Meer van ons zien? Laat snel je e-mailadres achter om binnenkort een invite te ontvangen!

Screenshot van de gevouwen Google Maps kaart

  • Tom

    De kracht van CSS3, HTML5 en snelle Javascript kan niet onderschat worden. Een nieuw scala aan mogelijkheden komt beschikbaar naarmate voorgenoemde technologieën verder worden ontwikkeld. De vraag is echter, wanneer kunnen dergelijke mogelijkheden worden toegepast voor publieke applicaties? De huidige stand van ontwikkeling van de verschillende browsers is te verscheiden om betrouwbaar gebruik te maken van moderne technologieën zoals CSS3-animations. Gebruikers zijn zich niet bewust van wat de keuze voor een browser met zich mee brengt. Concurrentie tussen browsers onderling kan een goede zaak zijn om individuele innovatie te vergroten maar zolang er grote gaten zijn tussen de mogelijkheden van verschillende browsers heeft dit nog weinig nut. Een ‘This site is optimized for Chrome’ badge is ook niet meer van deze tijd.