28.12.10

3D-Transforms-Problem #1: Keine 3D-Schatten

Ich habe in den letzten Tagen vermehrt mit 3D-Transforms experimentiert. Dabei sind mir einige Punkte aufgefallen, an denen man noch arbeiten muss. Klar, 3D-Transforms sind noch sehr jung – trotzdem wollte ich einfach mal sehen, wie weit man das schon produktiv nutzen kann.

Der einzige Browser, der die Geschichte schon annehmbar weit implementiert hat, ist der Safari; doch auch hier fehlt noch einiges. Die aktuelle Beta des Firefox 4 macht ziemlich vieles ziemlich richtig, aber auch manches ziemlich anders als Safari. Alle meine Beobachtungen beziehen sich also auf diese beiden Browser. Wobei in diesem speziellen Experiment beide Browser gleich reagieren.

Als kleine Fingerübung wollte ich zunächst einfach nur ein rotierendes Kärtchen basteln. Beim Klick auf einen Link soll dem entsprechenden Element nur eine Klasse zugewiesen werden und per CSS-Transitions wird dann gesteuert, wie der Übergang auszusehen hat.

Dieses Kärtchen hat man sehr schnell in sehr guter Qualität realisiert. Das schon eingebaute Easing bei den CSS-Transitions sorgt für ein smoothes Kartendreh-Erlebnis. Das Ergebnis sah dann so aus: Demo

Erstaunlich awesome. Das hätte ich so erst einmal nicht erwartet. Voller Euphorie dachte ich, man könne ja jetzt noch versuchen, einen Schatten hinzuzufügen. Also einfach box-shadow auf das sich drehende Objekt und siehe da: Der Schatten dreht sich mit. Schade!

Der box-shadow-Schatten wird wahrscheinlich einmal am Anfang berechnet und ist dann eben nur noch Pixelmasse. Für 3D-Transforms mit Transitions wäre ein dynamisch berechneter Schlagschatten deutlich besser geeignet. Natürlich würde das die Performance deutlich verschlechtern, aber hey, die Safari-Nutzer rennen doch sowieso alle mit mords den Grafikchips durch die Gegend. Um als Designer die Wahl zu haben, wäre vielleicht auch die Möglichkeit der Unterscheidung zwischen normalem box-shadow und dynamisch berechneten 3d-box-shadow sinnvoll. Bin mir da aber noch nicht sicher.

Kommentare [2]

Schepp am 28.12.2010 um 19:35

Kannst Du vielleicht irgendwie eine visuelle Gegenüberstellung posten/verlinken?

Markus Schlegel am 28.12.2010 um 22:52

Du meinst ein Beispiel, wie ich die Schatten gerne hätte? Hm, weiß ich so online jetzt leider keins, aber auf dem Mac gibt’s dieses Dashboard mit Notizzetteln, die man ähnlich drehen kann. Dort ist der Schatten, wie ich ihn gerne hätte.

Problem wird bei einem solchen 3D-Schatten auch noch sein, dass man die genaue Richtung aus der er kommt, festlegen müsste.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll

PromoteJS

JS String .toUpperCase