Aaron3219
Senior HTML'ler
Hallo liebes Forum,
also folgendes Problem:
ich habe folgenden css code:
Nun möchte ich, dass der Text im Button rotiert.
Das geht ja normalerweise mit:
Wie mache ich jetzt, dass
1. Nur der Text rotiert
2. Das NUR das "+" rotiert
Grüße,
Aaron
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;}
HTML:
<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:
Code:
#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