Transform / CSS3 schnell erklärt

Elemente mit Transform verschieben, verformen und vieles mehr.

Beitrag am erstellt von

Nun ist es möglich mit Transform Elemente in CSS3 zu veschieben, rotieren, verformen, perspektiven ändern und vieles mehr. In diesen kurzen Artikel erkläre ich Ihnen wie und wann sie Transform einsetzen sollten. Da diese Funktion neu mit CSS3 erschienen ist, müssen Sie Prefixe nutzen damit diese auch mit älteren Browner funktionieren.
Da dieses Thema sehr umfangreich ist und mein Artikel nur ein Teil erklärt, sind unten in den Quellenangaben Links, die zu Beiträgen verlinken die das Thema komplett und ausfürhlich erklären.

transform: [Transform Funktion] ;

Transform mit Hover:

Verschieben/ Transformieren in der X-Achse
translateX(20%)

        

-ms-transform: translateX(20%); /* IE 9 */

-webkit-transform: translateX(20%); /* Chrome, Safari, Opera */

transform: translateX(20%);

        

    
Verschieben/ Transformieren in der X-Achse (negativ)
translateX(-20%)

        

-ms-transform: translateX(-20%); /* IE 9 */

-webkit-transform: translateX(-20%); /* Chrome, Safari, Opera */

transform: translateX(-20%);

        

    
Verschieben/ Transformieren in der Y-Achse
translateY(20%)

        

-ms-transform: translateY(20%); /* IE 9 */

-webkit-transform: translateY(20%); /* Chrome, Safari, Opera */

transform: translateY(20%);

        

    
Verschieben/ Transformieren in der Y-Achse (negativ)
translateY(-20%)

        

-ms-transform: translateY(-20%); /* IE 9 */

-webkit-transform: translateY(-20%); /* Chrome, Safari, Opera */

transform: translateY(-20%);

        

    
Rotieren/ Drehen (neativ)
rotate(30deg)

        

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

        

    
Rotieren/ Drehen (neativ)
rotate(-30deg)

        

-moz-transform: rotate(-30deg);

-ms-transform: rotate(-30deg);

-o-transform: rotate(-30deg);

-webkit-transform: rotate(-30deg);