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>

<div class="css3_Stern">
<div class="css3_quadrat1"></div>
<div class="css3_quadrat2"></div>
</div>
<style>
<!--
.css3_Stern{
width: 250px;
height: 250px;
margin: 30px;
padding: 20px;
}
.css3_Stern .css3_quadrat1,
.css3_Stern .css3_quadrat2{
margin: 50px;
position: absolute;
width: 200px;
height: 200px;
background: #000;
}
.css3_Stern .css3_quadrat2 {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
-->
</style>

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.

<div class="css3_Stern">
<div class="css3_quadrat31"></div>
<div class="css3_quadrat32"></div>
<div class="css3_quadrat33"></div>
</div>

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)

<div class="css3_Stern">
<div class="css3_quadrat51"></div>
<div class="css3_quadrat52"></div>
<div class="css3_quadrat53"></div>
<div class="css3_quadrat54"></div>
<div class="css3_quadrat55"></div>
</div>
<style>
<!--
.css3_Stern{
width: 250px;
height: 250px;
margin: 30px;
padding: 20px;
}
.css3_Stern .css3_quadrat51,
.css3_Stern .css3_quadrat52,
.css3_Stern .css3_quadrat53,
.css3_Stern .css3_quadrat54,
.css3_Stern .css3_quadrat55 {
margin: 50px;
position: absolute;
width: 200px;
height: 200px;
background: #000;
}
.css3_Stern .css3_quadrat51 {
}
.css3_Stern .css3_quadrat52 {
-moz-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
-o-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg);
}
.css3_Stern .css3_quadrat53 {
-moz-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
-o-transform: rotate(36deg);
-ms-transform: rotate(36deg);
transform: rotate(36deg);
}
.css3_Stern .css3_quadrat54 {
-moz-transform: rotate(54deg);
-webkit-transform: rotate(54deg);
-o-transform: rotate(54deg);
-ms-transform: rotate(54deg);
transform: rotate(54deg);
}
.css3_Stern .css3_quadrat55 {
-moz-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
-o-transform: rotate(72deg);
-ms-transform: rotate(72deg);
transform: rotate(72deg);
}
-->
</style>

Kommentar (1)

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

Kommentare sind geschlossen.