Elemente modifizieren ohne Flash oder JavaScript

CSS3 Transforms
Kommentare

CSS hat sich seit seiner ersten Entwicklung sehr verändert und bietet Entwicklern die Möglichkeit, anspruchsvolle Website-Layouts umzusetzen. Gerade mit CSS3 wird dem Nutzer eine Fülle an Features zur

CSS hat sich seit seiner ersten Entwicklung sehr verändert und bietet Entwicklern die Möglichkeit, anspruchsvolle Website-Layouts umzusetzen. Gerade mit CSS3 wird dem Nutzer eine Fülle an Features zur Verfügung gestellt, mit dem Effekte erzielt und Content aufgewertet werden kann. Nur ein Beispiel ist die Modifizierung von Elementen mithilfe von CSS Transforms. Sara Viera erklärt, wie CSS Transforms genutzt werden kann.

Properties und Nutzung von CSS3 Transforms

Elemente mit CSS Transforms zu modifizieren, ist in fast jedem modernen Browser möglich – sogar auf vielen mobilen Browsern. 2D-Transforms werden von allen großen Browsern – inklusive Internet Explorer 9 und höher – unterstützt, 3D-Transforms immerhin ab Internet Explorer 10.

CSS3 stellt dem Nutzer bereits viele Properties automatisch zur Verfügung, mit denen sich die gewünschten Effekte erstellen lassen. Es lassen sich sogar mehrere Transform-Properties kombinieren, wodurch sich noch kompliziertere Effekte ergeben.

Bereits bei den 2D-Properties gibt es einige Auswahl, beispielsweise matrix(x,x,x,x,x,x), translate(x,y), scale(x,y), rotate(angle) und skew(x-angle,y-angle). Die meisten dieser Properties gibt es auch, in leicht anderer Form, um Elemente in einen 3D-Effekt zu transformieren. Zusätzlich gibt es hier noch das perspective(x)-Property.

Zwar lassen sich schon mit den einzelnen Properties ansprechende Effekte erzielen, allerdings verleiht erst die Nutzung mehrerer Properties gleichzeitig dem Element den besonderen Schliff. Dabei lassen sich auch 2D- und 3D-Properties mischen und bei Bedarf mit CSS Transitions animieren. Wie genau das funktioniert, verdeutlicht Sara Viera mit einigen Codebeispielen in ihrem Tutorial. In jedem Fall bietet CSS3 mit CSS Transformers eine gute, leicht zu benutzende Alternative zu Flash oder JavaScript, um Animationen für eine Website zu erstellen.

Aufmacherbild: Daisies on green nature background, stages of growth von Shutterstock / Urheberrecht: Delpixel

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -