CSS3 Animation Transformation
Kommen wir nun zur ersten Animationsmöglichkeit mithilfe von CSS3: der Transformation. Sie ist dafür gedacht Elemente frei in der Fläche verändern zu können. Mit der Notation "transform" können die Elemente beliebig gedreht, skaliert, verschoben oder gestaucht werden.
Die verschiedenen Transformationen werden nun näher erläutert:
transform: rotate(45deg);
Hier wird das Element im Uhrzeigersinn um 45° gedreht.
transform: scale(1.5);
Das Element wird auf 150% skaliert.
transform: translate(100px, 50px)
Durch die Transformation translate wird das Element in x und y Richtung verschoben.
transform: skew(15deg, 15deg)
Hierdurch wird das Element um 15° schräggestellt.
Diese Angaben können in CSS3 beliebig kombiniert werden, sodass ein Element verschoben, skaliert und beispielsweise gedreht werden kann. Diese Transformationen findet häufig im 2dimensionalen Raum statt.
jules87 am 19. Mai 11
|
Permalink
|
0 Kommentare
|
kommentieren