Rotierender Text

html.de-Forum HTML, XHTML & CSS
1

Hallo liebes Forum,

also folgendes Problem:
ich habe folgenden css code:

[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;}[/CODE]

[HTML]

  • Startseite +
      • [/HTML]

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

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

      #rotate:hover{transform: rotate(30deg);}[/CODE]

      Wie mache ich jetzt, dass

      1. Nur der Text rotiert
      2. Das NUR das „+“ rotiert

      Grüße,
      Aaron

2

Hallo

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

Ein Link zu der Seite ist meist hilfreicher.

Gruss

MrMurphy

3

Findest Du? o_O

Ich konnte damit gleich was anfangen und loslegen :smiley:

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

<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/

4

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)

5

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

6

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

7

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/

8

Ah Perfekt.

Danke