Nous allons voir dans ce tuto Shopify comment faire tourner une image sur elle même en CSS. Je vous conseille de mettre ce type d’effet sur un badge de confiance rond !  Cet effet c’est assez propice pour ce type d’image. Le tuto en question avec les badges de confiance est présent ici: https://dgeodev.com/tuto-comment-faire-un-footer-avec-badges-de-confiance-sur-shopify/

Intégration du code

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier Assets – Maintenant trouvez votre fichier .scss.liquid ou .css.liquid ou .css, généralement un theme ou style.

Mettez vous tout en bas du fichier et copiez/collez le code suivant:

.dg-rotation {  
  -webkit-animation: rotating 7s linear infinite;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

A ce stade vous devez repérer une image adaptée à cet effet car il faut reconnaitre que ce n’est pas un effet très simple à placer 😉

Installation du code

Une fois l’image trouvée vous allez mettre une classe sur la balise img de cette image ! la classe à rajouter est la suivante:

class="dg-rotation"

Ca va donner quelque chose comme ça:

rotation image en css shopify

Personnaliser la rotation

Vous souhaitez modifier la rapidité à laquelle l’image tourne ? dans ce cas il vous suffit de jouer avec la valeur 7s et de la modifier 😉

Vous avez des difficultés ?

Je vous invite à attendre la version vidéo qui sera plus claire 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 5 votes]

Cet article a 2 commentaires

  1. Vivement la vidéo oui :). Merci 🙂

    1. La vidéo est en place :p

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine