Bonjour,

je travaille sur un projet perso, il est terminé, je l'ai testé sur Chrome, Mozilla il tourne comme je veux. Mais sur Edge c'est plus compliqué voici le code css :

.bouton{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  line-height: 2.8rem;
  z-index: 20;
  text-decoration: none;
  color:#5e6356;
  text-align: center;
  padding:20px 35px;
  font-size:2vw;
  border:2px solid #fff;
  background-color: rgba(0,0,0,0.7);
  box-shadow: 1px 1px 30px #000;
  -webkit-animation:bounce 2s infinite;
}

Quand j'enlève le transform translate(-50%,-50%), il réagi comme je veux, sauf qu'il n'est plus centré. 

Normalement en cliquant sur le bouton (balise a), il tourne sur lui-même et affiche un autre texte (via jQuery).

Mais là, il ne tourne pas.

J'ai beau chercher je ne vois pas comment contourner la chose...

-
Edité par Odul Nibas 13 juin 2019 à 15:12:26

Bonjour,

première chose : les versions préfixées (avec -webkit) doivent être avant les versions finales - si on peut les supprimer c'est encore mieux. Et pour l'animation… il n'y a ici que la version préfixée. Corrige déjà ça.

Bonjour Lamecarlate,

j'ai modifié ce que tu m'as conseillé, cependant il observe le même comportement.

J'avais précédemment ajouté le -webkit car j'avais lu que Edge le supportait mais dans mon cas, peanut.

Bonjour Odul Nibas ,

Tu peux donner le code HTML + CSS

pour que l'on puisse tester

bonjour et désolé du retard, voici les codes :

.bouton{
  position: absolute;
  top:50%;
  left:50%;
/*  -webkit-transform: translate(-50%,-50%);*/
  transform: translate(-50%,-50%);
  line-height: 2.8rem;
  z-index: 20;
  text-decoration: none;
  color:#5e6356;
  text-align: center;
  padding:20px 35px;
  font-size:2vw;
  border:2px solid #fff;
  background-color: rgba(0,0,0,0.7);
  box-shadow: 1px 1px 30px #000;
/*  -webkit-animation:bounce 2s infinite;*/
  animation:bounce 2s infinite;
}

  <section id="head">
      <div class="duoG"></div>
      <div class="duoD"></div>
      <div class="dd"></div>

  <a class="bouton" href="template.php">Ludovic Sabin<br/>
 <mark>Développeur Web</mark>
  </a>
  <img class="desktop" src="assets/img/computer.png" />
    </section>

  $('.bouton').click(function(e) {
  		var link = $(this).attr("href");
      $('.duoG').addClass('un');
      $('.duoD').addClass('deux');
      setTimeout(function(){
          $('.dd').addClass('deux');
      }, 1500);

    $('.bouton').css({
          'color':'#fff',
          'backgroundColor': 'rgba(94,99,86,0.8)',
          'border': '3px double #fff',
          'position': 'absolute',
          'top':'50%',
          'left':'50%',
          'lineHeight': '35px',
          'margin':'auto',
          /*'-webkit-transform':'translate(-50%,-50%) scale(1.8) rotateX(360deg)',*/
          'transform': 'translate(-50%,-50%) scale(1.8) rotateX(360deg)',
          'transformStyle': 'preserve-3d',
          '-webkit-transformStyle': 'preserve-3d',
          'fontFamily':'Major Mono Display, arial',
          'animation':'none',
          '-webkit-animation':'none',
          'fontSize': '1rem',
          'transition':'all 1s ease-out'
    });

        $('.bouton').html('<p>...Bienvenue</br> et bonne visite...</p>');


      setTimeout(function() {
          window.location.href = link;
      }, 3000);

    e.preventDefault();
  });

voila j'ai rajouté le code jQuery, a noter encore une fois que si je vire le transform : translate(-50%,-50%) tout fonctionne mais il n'est plus centrer, même en jouant sur les éléments TOP et LEFT (trop hasardeux).

Bonjour Odul Nibas ,

Essaye ce code :

https://codepen.io/Zonecss/pen/xowVeY

Bonjour AliasDmc,

cela fonctionne parfaitement, merci beaucoup.

Je vais regarder ça de plus près pour voir ou était mon problème.

Encore merci.