![](https://indexadhu.hit.gemius.pl/redot.gif?id=nSCbubuYpDWJZLZs0TssLrbt33Lk5kbipuiZrkg89G3.g7/stparam=skrjjshgja/fastid=eeorncrnbsilkneetelidigetojp/nc=0)
Így készült a Rubik-kockás Google-logó
Tegnap a Google speciális logóval, úgynevezett doodle-lel ünnepelte a Rubik-kocka negyvenéves születésnapját. Az interaktív kockát a web stílusait leíró CSS-alapon készítették, néhány okos trükk bevetésével. Nem véletlen, hogy május 19-én rakták ki a logót: a dátum 5/19-es írásmóddal arra utalt, hogy a kockának 519 trillió lehetséges állása van.
![unnamed.gif](https://kep.cdn.indexvas.hu/1/0/612/6125/61253/6125338_89fa49f7b4419e7c317b2c1d41d439d6_wm.gif)
A Google 14 éve gyárt különböző doodle-öket, azóta ünnepeltek vele fontos kulturális eseményeket és jelentős találmányokat is. 2010-ben például a Pac-Man harmincadik születésnapját játszható logóval ünnepelték.
A legjobb doodle-ök általában művészet és technológia határán jelennek meg, mint Rubik kockája. Eddig azonban a cég nem tudott megfelelő verziót készíteni belőle. „A Rubik-kockát újra és újra javasolták, de úgy gondoltuk, a technológia még nem állt készen ehhez a weben” – mondta a Doodle-csapat vezetője, Ryan Germick a Wirednek.
Az elmúlt hónapokban azonban mindez megváltozott: annak ellenére, hogy technikailag még mindig az egyik legambiciózusabb projektnek tartják, a legtöbb böngésző mára támogatja a CSS 3D Transform nevű technológiát, így úgy készülhetett el a kocka, hogy a legtöbb felhasználó játszhatott vele.
„A CSS 3-D Transform technológiának köszönhetően háromdimenziós térben tudtuk megjeleníteni a kockát, ami élőnek hatott, mivel reagált az egérmozgásokra” – mondta Kristopher Hom, a projekt vezetője. A legnagyobb kihívás az volt, hogy pontosan lemásolják a kocka funkcionalitását: az egyetlen plusz elem a lépésszámjelző lett.
A Google közzéteszi az interaktív logó forráskódját, és elindítottak egy interaktív Chrome-kísérletet is, ahol például zenélő kockával is lehet játszani, de sajátunkat is elkészíthetjük.
![](https://indexadhu.hit.gemius.pl/redot.gif?id=nSCbubuYpDWJZLZs0TssLrbt33Lk5kbipuiZrkg89G3.g7/stparam=skrjjshgja/fastid=eeorncrnbsilkneetelidigetojp/nc=0)