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.

Weiterlesen

text-drehung logo css3 mit transform-rotate

Viele Eigenschaften von CSS3 bzw. deren Nutzung sind auch für mich neu und ich muss mit den Werten und deren Auswirkungen spielen, um ein Gefühl dafür zu bekommen. Was passiert wo, wenn ich an dieser oder jener Schraube drehe und die Werte ändere?

CSS3
.de

 

Spass an der Sache, Geduld und Freude beim Ausprobieren ist angesagt. Nicht immer klappt auf Anhieb, was man möchte. Wie immer im Leben. Aber ich hoffe, das es auch hier die Übung macht! Wichtig ist, das man versteht, was passiert und warum das genau so passiert.

Hier das obige als Grafik eingebunden, damit man ÜBERALL sieht, was das Ergebnis sein SOLLTE.

logo-css3

logo-css3 als jpg-Datei

<link href='https://fonts.googleapis.com/css?family=Faster+One' rel='stylesheet' type='text/css'>
<style>
<!--
.css3name {
font-family: 'Faster One', cursive; font-weight: 400;
width: 350px;
height: 100px;
color: red; 
float:left;
position:relative;
padding:25px 5px 0px;
margin-left:10px;
}
.css3name .css3titel {
font-size:95px;
line-height:95px;
position:absolute; left:15px; top:5px;
}
.css3name .css3titel em {
display: block;
float: left;
color: blue;
position:absolute; right:-80px; top:16px; 
transform: rotate(-110deg);
-webkit-transform: rotate(-110deg); 
-moz-transform: rotate(-110deg);	
}
.css3name .css3tld { 
display:block;
color: black; 
font-size:35px; 
position:absolute; right:0px; top:30px;
transform: rotate(-110deg);
-webkit-transform: rotate(-110deg); 
-moz-transform: rotate(-110deg);	
}
-->
</style>

<div class="css3name">
<span class="css3titel">CSS<em>3</em></span>
<span class="css3tld">.de</span>
</div>

css3 – transform – rotate

Mit der Eigenschaft transform und dem Wert – rotate(mit Gradangabe) kann man ein Blockelement im Uhrzeigersinn (gradweise) drehen, Minuswerte ergeben eine Drehung gegen den Uhrzeigersinn. Eigentlich brauchte ich das bis heute (noch) nicht, aber es ist nun machbar.

CSS3.de Nachrichten, Information, Übungen und Beispiele zum Thema CSS3
CSS3.de Nachrichten, Information, Übungen und Beispiele zum Thema CSS3

 
 
 

<style>
<!--
div #css3transformrotate1, div #css3transformrotate {
width: 220px;
height: 120px;
border: 1px solid black;
font-size: 14px;
color: white;
background: red;
padding: 10px;
margin: 20px;
}
div #css3transformrotate {
background: blue;
transform: rotate(20deg);
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari, Chrome */
-moz-transform: rotate(20deg); /* Firefox */
-o-transform: rotate(20deg); /* Opera */
}
--></style>
<div id="css3transformrotate1"><strong>CSS3.de</strong> <span>Nachrichten, Information, Übungen und Beispiele zum Thema CSS3</span></div> 
<div id="css3transformrotate"><strong>CSS3.de</strong> <span>Nachrichten, Information, Übungen und Beispiele zum Thema CSS3</span></div>