CSS3 Transform: HTML Elemente einfach transformieren

Mittels „Transform“ drehen, skalieren (vergrößern/verkleinern), verschieben oder verzerren wir HTML Elemente per CSS3. Am besten einmal den CSS3 Generator ansehen und mit „Transform“ experimentieren. Fügen wir CSS Transitions (siehe CSS3 Generator) hinzu können wir Transforms sowie sämtlich weitere CSS Befehle animiert wiedergeben bzw. wechseln bei z.B. Hover.

.element {
    background:#f73791;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height:400px;
    color:#ffc6e1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
  
.element.sec {
    background:#ff5400;
    color:rgb(255,255,255);
    height:200px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    padding-top:50px;
    padding-bottom:50px;
}

.element.trd {
    background:#baff00;
    color:rgb(45,45,45);
    height:300px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    padding-top:40px;
    padding-bottom:90px;
}