logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS3 Transform – Rotieren

Mittels CSS3 können Elemente in einer Seite rotiert, gekrümmt oder skaliert dargestellt werden. In folgenden Beispielen wird eine Grafik verwendet, die rotiert, gekrümmt und skaliert wird

Die ursprüngliche verwendete Grafik für alle drei Beispiele kann hier angesehen werden.

Zuerst rotieren wir die Grafik 7 Pixel absteigend (deg), (-7deg) wäre ansteigende Grafik um 7 Pixel.

 


.my_CSS3_class {
 transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
}

 

CSS3 Transform – Krümmen

Im folgenden Beispiel verkrümmen wir die Grafik um 25 Pixel in der X-Achse

 


.my_CSS3_class {
 transform:skew(-25deg);
-moz-transform:skew(-25deg);
-webkit-transform:skew(-25deg);
}

 

CSS3 Transform Skalieren

Im folgenden Beispiel skalieren wir die Grafik um 0.5 Pixel sprich wir verkleinern sie um die Hälfte.

 


.my_CSS3_class {
 transform:scale(0.5);
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tags

HTML5 META Artikel Doctype Header Footer