[ERLEDIGT] Rotierender Text

[Aaron3219]

Hallo liebes Forum,

also folgendes Problem:
ich habe folgenden css code:

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width: 160px;
  text-align: center;
  content: "+";
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 0px;
  background:#00B7FF;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}

#margin2{margin-bottom: 1px;}

<nav class="vertical" style="margin-top: 5px;">
    <ul>                        
        <li><a href="" style="" id="margin2">Startseite +</a></li>
     <ul>
</nav>

Nun möchte ich, dass der Text im Button rotiert.
Das geht ja normalerweise mit:

#rotate{transition: transform 0.5s ease-in-out}

#rotate:hover{transform: rotate(30deg);}

Wie mache ich jetzt, dass
1. Nur der Text rotiert
2. Das NUR das "+" rotiert

Grüße,
Aaron

 

[MrMurphy]

Hallo

Irgendwie hast du Schwierigkeiten den für uns entscheidenden Quelltext zu zeigen.

Ein Link zu der Seite ist meist hilfreicher.

Gruss

MrMurphy

 

[SpiceLab]

Irgendwie hast du Schwierigkeiten den für uns entscheidenden Quelltext zu zeigen.

Findest Du?

Ich konnte damit gleich was anfangen und loslegen

Wie mache ich jetzt, dass
1. Nur der Text rotiert
2. Das NUR das "+" rotiert

Darf der HTML-Code dafür auch ein bisserl erweitert werden? :)

<a href="" style="" id="margin2"><span>Startseite <span>+</span></span></a>

nav a :first-child,
nav a :first-child :last-child {transition: transform 0.5s ease-in-out}
nav a:hover :first-child {display:inline-block;transform: rotate(30deg);} /* Kompletter Text rotiert, wenn der Button überfahren wird */
nav a :first-child:hover :last-child {display:inline-block;transform: rotate(60deg);} /* +-Zeichen rotiert, wenn der Text überfahren wird */

Demo: https://jsfiddle.net/spicelab/qpLa0npp/

 

[Aaron3219]

Danke Spicelab,
hat funktioniert. Und eine Frage hätte ich noch...

https://app.cssmenumaker.com/?legacy_id=421
die haben ja auch so ein "+". Wie macht man sowas?
(Keine sorge ich benutze solche Websiten nicht um mir die Arbeiten abzunehmen)

 

[MrMurphy]

Hallo

Meinst du die weißen Kreuze vor dem rotbraunen Hintergrund?

Dabei handelt es sich um sogenannte Icon-Fonts. In dem Beispiel FontAwesome.

Siehe zum Beispiel

http://fontawesome.io/icons/

Zur Anwendung siehe

http://fontawesome.io/examples/

Gruss

MrMurphy

 

[Aaron3219]

Ach okay danke.
Und meine letzte Frage aus Interesse:
Wenn ich statt der Schrift NUR das "+" drehen lassen will. Wie würde das denn aussehen?

Grüße
Aaron

 

[SpiceLab]

Und meine letzte Frage aus Interesse:
Wenn ich statt der Schrift NUR das "+" drehen lassen will. Wie würde das denn aussehen?

nav a :first-child :last-child {transition: transform 0.5s ease-in-out}
nav a:hover :first-child :last-child {display:inline-block;transform: rotate(60deg);} /* +-Zeichen rotiert, wenn der Button überfahren wird */

Demo #2: https://jsfiddle.net/spicelab/6nbu41Ly/

 

[Aaron3219]

Ah Perfekt.

Danke