Je voudrais faire ce menu, avec un texte vertical et un angle de rotation de 90 degrés dans chacun des champs. Comment puis-je faire ceci?Comment créer un menu avec texte vertical et rotation de 90 degrés pour chaque article?
http://s6.picofile.com/file/8241625534/Untitled_5.jpg
S'il vous plaît aidez-moi.
Sur votre fichier CSS, créez une classe comme ceci:
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
appliquent ensuite cette propriété à tous les éléments que vous souhaitez faire pivoter par difining cette classe dans chacun d'eux.
vous pouvez jeter un oeil à writing-mode
nav {
float:left;
writing-mode:tb-rl;/*IE*/
writing-mode:vertical-lr;/* OPera/webkit*/
writing-mode:sideways-lr;/* should be the one */
}
li {
display:inline-block;
}<nav>
\t <ul>
\t \t <li><a href="#">Home</a></li>
\t \t <li><a href="#">About</a></li>
\t \t <li><a href="#">Clients</a></li>
\t \t <li><a href="#">Contact Us</a></li>
\t </ul>
</nav>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
Salut Sadaf! Bienvenue à StackOverflow. Avez-vous essayé de le rechercher sur le site? Avez-vous essayé un code? Incluez n'importe quel code que vous avez essayé afin que nous puissions vous aider à diagnostiquer votre problème. Notez que SO n'est pas un endroit pour ceux qui sont ici simplement pour des réponses sans montrer l'effort d'avoir tenté de résoudre le problème eux-mêmes. – shrmn