Effet rotatif sur titre des forums

[Lucas.Y]

Bonjour alors comme l'explique le titre de mon sujet J'aimerais appliquer le code CSS transform: rotate sur le titre de mes forums affiché dans mes catégories ! J'ai essayé mais je n'y arrive pas ! Un peu d'aide s'il vous plait !

Voici mon code css :

Code:

/*titre des forums sur catégories*/
span.forumname
{
margin-left: 250px;

         
}
span.forumname:hover
{
  
 -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

[pierre du 31]

en espérant vous aider

droite

Code:

<p id="rotate">
Ton texte
</p>

Code:

p#rotate img
{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#rotate img:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Gauche

Code:

<p id="360">
ton texte
</p>

Code:

p#360 img
{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}

p#360 img:hover
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

[Lucas.Y]

Merci Mais cela ne fonctionne pas :/

[pierre du 31]

essaye ceci:

Code:

<p id="360">
<img src=" URL DE TON IMAGE ">
</p>



Code:

p#360 img
{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
 
}
 
p#360 img:hover
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

ou:

Code:

<p id="rotate">
<img src=" URL DE TON IMAGE">
</p>

Code:

p#rotate img
{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
 
p#rotate img:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

[Lucas.Y]

Ce n'est pas une image, c'est un texte le titre de mon forum ! Désolé pour ce qui pro quo :/

[pierre du 31]

Je pense pas que un texte puisse pivoter, ou alors pas totalement. Je vais chercher sur internet et je vous dis si c'est possible, si un membre à une autre idée .


Edit: j'ai trouvé ça :

Code:

<style type="text/css">
<!--
td.accueil {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
text-decoration: none;
}
td.accueil:hover {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
text-decoration: none;
}
-->
</style>
<table>
  <tr>
    <td class="accueil">Accueil</td>
  </tr>
</table>

[Lucas.Y]

Ca ne fonctionne pas non plus :/

[Matriochka]

Bonjour,

Où en est votre problème ? S'il est résolu, merci de le signaler. Sinon, pensez à remonter votre sujet régulièrement sans quoi celui-ci sera considéré comme abandonné et envoyé à la corbeille.

Bonne journée

[Lucas.Y]

Toujours pas résolu, Up !

[Invité]

Bonsoir,

As-tu essayé d'appliquer l'effet sur a.forumlink:link et a.forumlink:hover ? Chez moi, ça fonctionne nickel ^.^

[Neptunia]

Coucou !

Si le premier code avait fonctionné, vous n'auriez rien vu.
Une rotation de 360° représentant un tour complet.

Imaginez que vous avancez de 12h les aiguilles d'une horloge !
1h = 30°, 12h = 360°

[Lucas.Y]

Bah justement je veux une rotation de 360° mais qui se voit !

[Matriochka]

Bonjour,

Où en est le problème ? S'il est résolu, merci de nous le signaler. Sinon, pensez à remonter régulièrement votre sujet sans quoi celui-ci sera considéré comme abandonné et envoyé à la corbeille.

Bonne journée