Rotation d'une image dans une carte

Par Ekim Kael, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.
je voudrais faire une rotation sur deux images d'un même bloc.
voici le code HTML

<div class="item-0"> <div class="views-field views-field-field-image"> <div class="field-content im_100pr100_w rotate-img"> <img typeof="foaf:Image" src="" class="lazyOwl"> <img typeof="foaf:Image" src="" class="lazyOwl"> </div> </div> <div class="views-field views-field-title col-pad-top-20"> <h2 class="field-content text-center ">EXPOSITION</h2> </div> <div class="views-field views-field-field-teste-1"> <div class="field-content texteSmall texteSmall col-pad-bottom-10 text-left col-pad-top-10 col-pad-right-10 col-pad-left-10"> <p><strong>Nicamex 2016</strong>, est le point d’accès d’affaires le plus important de son genre,entre le Nigeria et le Cameroun, où de nouvelles relations seront formées, les projets discutés et les transactions effectuées pour développer votre entreprise au delà de la frontière...&nbsp;</p> </div> </div> </div>

et ici le code css

.item-0 { width: 270px; height: 350px; margin: 2% auto; position: relative; /* background-color: lightyellow;*/ cursor: pointer; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all ease 1s; box-shadow: 0px 3px 0px lightgreen; display: flex; flex-direction: column; } .rotate-img { position: absolute; } .im_100pr100_w, .im_100pr100_w img { width: 100% !important; height: auto; position: absolute; top: 0; } .views-field-field-image{ position: relative; animation: flip 5s linear infinite; } .views-field-title{ position: absolute; top: 35%; bottom: 35%; right: 0; left: 0; } .views-field-field-teste-1{ position: absolute; bottom: 0px; } .col-pad-top-20 { padding-top: 20px; } .text-center { text-align: center; font-family: Bebas Neue; } .col-pad-left-10 { padding-left: 10px; } .col-pad-bottom-10 { padding-bottom: 10px; } .col-pad-right-10 { padding-right: 10px; } .col-pad-top-10 { padding-top: 10px; } .texteSmall { font-size: 13px; font-family: roboto light; } .text-left { text-align: left; } @keyframes flip { 100%{ -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

je veux que ces images alternent à intervalle de te mps
je ne sais pas si j'explique bien mon probleme
je voudrais le faire en JS mais je sais vraiment pas par où commencer

5 réponses

Canonier, il y a 9 ans

Salut,
S'il te plait corrige la mise en page de ton topic !

De ce que j'ai compris je pense que les keyframes en css répondront à ton probleme sans avoir à utiliser du js, tu t'es déjà renseigné de ce coté là ?

Ekim Kael, il y a 9 ans

pas vraiment mais je vais regarder.je parle de JS parce que je veux que l'animation se fasse à intervalle de temps

SLK, il y a 9 ans

Salut,

je veux que ces images alternent à intervalle de temps

Avec le CSS et les keyframes tu peux mettre une "durée", un "delai", une "répétition".
Moi aussi j'ai l'impression que ça te conviendrai.

http://www.w3schools.com/css/css3_animations.asp

Ekim Kael, il y a 9 ans

je n'ai pas pu le faire mais j'ai réussi quand même à gerer mon problème

Ekim Kael, il y a 9 ans

avec un slider