E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. skalieren
  2. rotieren
  3. neigen
  4. verschieben

skalieren

Weitere Befehle für CSS3 sind Skalierung, Rotation, Neigung und Verschiebung. Wir beginnen mit der Skalierung von Objekten. Skalierung bedeutet vergrößern oder verkleinern. Je nachdem welche Werte angegeben werden, kann man so auch Elemente verzerren. Viele werden sich denken, warum man nicht gleich die Größe angibt wo man will. Dies ist absolut eine berechtigte Frage. Verwendet wird die Skalierungs-Funktion oft bei Animationen (z. B. Hover-Effekten). Um die Funktion zu nutzen, benötigen Sie die Transformations-Eigenschaft (transform). Als Wert muss scale() angegeben werden. Innerhalb der Klammer kann ein Wert (gilt dann für x- und y-Achse) oder zwei Werte (1. Zahl x-Achse - 2. Zahl y-Achse) angegeben werden. Die Zahl 1 bedeutet 100%, d. h. die Größe bleibt gleich. 1.5 wäre dann z. B. 150% größer. Hierzu haben wir folgendes Beispiel, indem die 2. Box verzerrt und skaliert wird (x-Achse 130% - y-Achse 180%):

#box1 {
    background-color: blue;
    float: left;
    width: 300px;
    height: 300px;
}
 
#box2 {
    background-color: blue;
    float: right;
    width: 300px;
    height: 300px;
    transform: scal(1.3, 1.8);
}
Anzeigebeispiel
Anzeigebeispiel



rotieren

Um Elemente zu rotieren, benötigt man ebenfalls wieder die Transformations-Eigenschaft. Als Wert muss rotate() angegeben werden. Innerhalb der Klammer dürfen Werte zwischen -360 und 360 angegeben werden. Als Maßeinheit wird "deg" verwendet. Nun könnte ein Element, dass gedreht werden sollte folgende Anweisungen in CSS haben: transform: rotate(45deg); In diesem Fall würde sich das Objekt um 45° drehen. Um noch weitere tolle Effekt zu erzeugen, gibt es die Möglichkeit einen Drehpunkt festzulegen. Hierbei wird nicht die Transformations-Eigenschaft benutzt, sondern ein Abwandlung davon: transform-origin Als Wert sind 2 Prozentwerte (bei 0% kann das Prozentzeichen weggelassen werden!) zu verwenden. Der 1. Wert ist für die x-Achse und der 2. für die y-Achse. Die Standardeinstellung, die automatisch erfolgt, ist 50% 50%. Dabei gelangt der Drehpunkt genau in die Mitte. Wenn bei der x-Achse 0% angegeben wird, dann bedeutet es, dass der Drehpunkt nach links verschoben wird. Wenn bei der y-Achse 0% angegeben wird, dann bedeutet es, dass der Drehpunkt nach oben verschoben wird. Die Angabe 100% 100% würde als bedeuten, dass sich der Drehpunkt an der rechten unteren Ecke ist. Hier nun ein fertiges Beispiel mit 2 Boxen:

#box1 {
    background-color: blue;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 350px;
    transform: rotate(-20deg);
    transform-origin: 100% 100%;
}
 
#box2 {
    background-color: red;
   width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 650px;
    transform: rotate(20deg);
    transform-origin: 0 100%;
}
Anzeigebeispiel
Anzeigebeispiel



neigen

Ein weiteres spannendes Thema zu CSS3, ist das Neigen von Elementen. Auch hier wird wieder die Transformations-Eigenschaft verwendet. Als Wert für die Eigenschaft wird skew() verwendet. Wird in die Klammer nur eine Zahl eingegeben gilt es für die x-Achse. Werden 2 Zahlen angegeben, und diese mit Komma und Leerzeichen getrennt, dann gilt die 1. Zahl für die x-Achse und die 2. für die y-Achse. Im Gegensatz zur Rotation müssen Sie bei der Neigung andersherum (also gegen den Uhrzeigersinn) denken. Dies ist im 1. Moment vielleicht ein wenig verwirrend, bei genauerem betrachten logisch. In Kombination der 2 anderen Elemente (Rotation und Skalierung) können so richtig schöne 3D-Effekte erzeugt werden - Probieren Sie es einfach mal aus. Aber nun wieder zurück zur Neigung. Die Maßeinheit für die Neigung ist übrigens ebenfalls deg. Hier haben wir für Sie ein kleines Beispiel:

#box1 {
    background-color: blue;
    float: left; 
    width: 300px;
    height: 300px;
    transform: skew(10deg, 30deg);
}
 
#box2 {
    background-color: red;
    float: right;
    width: 300px;
    height: 300px;
    transform: skew(-10deg, -30deg);
}
Anzeigebeispiel
Anzeigebeispiel



verschieben

Eine weitere design-Möglichkeit mit der Transformations-Eigenschaft ist die Verschiebung. Elemente können mit dem Wert translate() verschoben werden. In die Klammer können ein oder zwei Werte stehen. Der erste Wert bezieht sich immer auf die x-Achse (auch bei der Angabe von nur einer Zahl) und der zweite immer auf die y-Achse. Getrennt werden die Zahlen durch ein Komma und ein Leerzeichen. Auch Minusangaben sind hier möglich. Die Zahlen dürfen, als Maßeinheiten, alle nummerischen Angaben haben. In dem folgenden Beispiel erstellen wir 2 gleichfarbige Boxen, wobei die 2. Box nach rechts und nach unten verschoben wird:

#box1 {
    background-color: red;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 10px;
    left: 10px;
}
 
#box2 {
    background-color: red;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 10px;
    left: 10px;
    transform: translate(500px, 100px);
}
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de