[RÉGLÉ] Faire pivoter une image en optant pour le CSS

[allanmarla]

Bonjour,

Voilà j'ai une question après des recherches infructueuses, j'aimerai faire pivoter une image fixe continuellement.

1- J'ai crée mon article sous joomla
2- Mon code source est tres simple

<p><img class="tourne" src="images/xxx/yyy/zzz.PNG" alt="" width="126" height="117" /></p>

3- Ensuite je vais dans mon template.css et je rajoute

.tourne {
-webkit-animation: spin 1.5s linear infinite;
-moz-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}

4- Sur 1 des forums visités, il faut apparement construire l'animation (ici appelé spin)

@-moz-keyframes spin {
100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}

Question:

- Le code html, c'est bien le code que nous pouvons voir au niveau des articles ?
- Le code css, est bien celui que nous devons completer au niveau du template.css ?
- Ou dois je mettre le code du point 4 et à quoi il sert?
- le point 2 je l'ai mis dans mon article, les points 3 et 4 dans mon template.css, merci de m'expliquer si c'est OK ?

[lomart]

Bonsoir,

C'est tout à fait cela.
Pour le code html, il faut passer en mode code dans l'éditeur. Selon l'éditeur (JCE / TinyMCE) le bouton est légèrement différent, mais ressemble à <>

En mode code, il est possible de saisir ceci dans le corps de l'article

    <style>
    .tourne {
        -webkit-animation: spin 1.5s linear infinite;
        -moz-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }
    @-moz-keyframes spin {
        100% { -moz-transform: rotate(-360deg); }
    }
    @-webkit-keyframes spin {
        100% { -webkit-transform: rotate(-360deg); }
    }
    @keyframes spin {
        100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
    }
    </style>

même s'il est préférable de le mettre dans le fichier de personnalisation du template. custom.css ou user.css selon le template

[allanmarla]

Merci Iomart,

Cela fonctionne .
J'ai laissé (ci dessous) dans le code html

<p><img class="tourne" src="images/xxx/yyy/zzz.PNG" alt="" width="126" height="117" /></p>

puis rajouté (ci dessous) dans template.css (protostar)- auparavent j'avais oublié au debut <style> et la fin pour fermer </style>


<style> .tourne { -webkit-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } </style> Bon maintenant je vais jouer avec les couleurs.

[lefabdu51]

lomart : en voyant le post 3, je me pose une question :
as t on besoin de la balise <style> dans le fichier user.css de protostar?

[lomart]

lomart : en voyant le post 3, je me pose une question :
as t on besoin de la balise <style> dans le fichier user.css de protostar?

Dans le fichier CSS : NON
Ma réponse était pour le code dans l'article.

[lefabdu51]

merci loic .....
C'est juste que la reponse qui t a été faite me surprenait un peu.