Effet rotatif sur titre des forums

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet rotatif sur titre des forums

Message par Lucas.Y Dim 11 Aoû 2013 - 0:32

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);
}


Dernière édition par Lucas.Y le Lun 26 Aoû 2013 - 21:43, édité 1 fois
avatar

Lucas.Y
*

Féminin
Messages : 38
Inscrit(e) le : 05/07/2013

http://littlestars.forumactif.org/
Lucas.Y a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par pierre du 31 Dim 11 Aoû 2013 - 2:00

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);
}
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Lucas.Y Dim 11 Aoû 2013 - 13:32

Merci Mais cela ne fonctionne pas :/
avatar

Lucas.Y
*

Féminin
Messages : 38
Inscrit(e) le : 05/07/2013

http://littlestars.forumactif.org/
Lucas.Y a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par pierre du 31 Dim 11 Aoû 2013 - 17:37

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);
}
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Lucas.Y Dim 11 Aoû 2013 - 17:48

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

Lucas.Y
*

Féminin
Messages : 38
Inscrit(e) le : 05/07/2013

http://littlestars.forumactif.org/
Lucas.Y a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par pierre du 31 Dim 11 Aoû 2013 - 17:51

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>
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Lucas.Y Dim 11 Aoû 2013 - 18:12

Ca ne fonctionne pas non plus :/
avatar

Lucas.Y
*

Féminin
Messages : 38
Inscrit(e) le : 05/07/2013

http://littlestars.forumactif.org/
Lucas.Y a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Matriochka Sam 17 Aoû 2013 - 11:46

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
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Lucas.Y Dim 18 Aoû 2013 - 21:37

Toujours pas résolu, Up !
avatar

Lucas.Y
*

Féminin
Messages : 38
Inscrit(e) le : 05/07/2013

http://littlestars.forumactif.org/
Lucas.Y a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Invité Dim 18 Aoû 2013 - 21:59

Bonsoir,

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Neptunia Lun 19 Aoû 2013 - 1:02

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°
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Lucas.Y Mar 20 Aoû 2013 - 20:07

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

Lucas.Y
*

Féminin
Messages : 38
Inscrit(e) le : 05/07/2013

http://littlestars.forumactif.org/
Lucas.Y a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet rotatif sur titre des forums

Message par Matriochka Lun 26 Aoû 2013 - 9:23

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
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum