ein Stern mit transform:rotate

Wenn wir uns mit der CSS3-Eigenschaft transform und dem Wert rotate einen Stern bauen wollen, benötigen wir eigentlich nur 2 Quadrate für die Minimalversion. Diese liegen übereinander, allerdings wird ein Quadrat mit transform:rotate um den Winkel von 45 Grad gedreht.

Als HMTL-Element(e) nutzen wir an dieser Stelle <div>

Da wir uns natürlich nicht mit der Minimalversion zufrieden geben, benötigen wir ein oder mehrere zusätzliche Quadrate, die einfach wieder darüber gelegt und gedreht werden.

Zu beachten an dieser Stelle ist eigentlich nur die Gradzahl der Drehungen. Eine komplette Drechung um die Achse entsprechen 360 Grad. Will man nun aus 3 Quadraten mit jeweis 4 Ecken einen gleichmäßingen Stern abbilden, teilt man 360 durch die Anzahl der Spitzen und wir erhalten 30 Grad Drehung.

360 / 12 = 30 Grad : (3 Quadrate mit jeweils 4 Ecken)

Bei 5 Quadraten hätten wir 20 Ecken und somit jeweils 18 Grad Drehung je Quadrat.

360 / 20 = 18 Grad : (5 Quadrate mit jeweils 4 Ecken)

Kommentar (1)

  1. Pingback: CSS3.de » CSS3 Animation mit transition bei :hover

Kommentare sind geschlossen.