Bonjour à tous,

Pour un formulaire multi step, j'ai voulu essayer de faire une animation css3 pour chaque changement d'étape, avec transform: rotateX.

Voilà le code : 

@keyframes in {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

L'animation fonctionne bien, mais le formulaire s'affiche différemment avant et apres l'animation, notamment je perd la bordure d'un input file, c'est comme si l'anim jouait sur le width du formulaire et le line height de ses éléments, chaque changement est minime (1px). Voila des screens :

Avant l'anim :

Après l'anim :

Je n'ai pas trouvé de problème similaire sur google, qu'en pensez vous ? 

Merci d'avance

-
Edité par 1Not 2 janvier 2022 à 2:45:03

Oui bien sur, le CSS :

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
}

.card-body {
  -webkit-perspective: 20px;
          perspective: 20px;
}

#form-data{
	
  -webkit-transform-origin: top left;
          transform-origin: top left;
  padding:1rem 1rem;
  background-color:#FFF;
  border-radius: 0 0 1em 1em;
  border: 1px solid rgba(0,0,0,.125);
  width:100%;
}



.animate-in {
  -webkit-animation: in 400ms ease-in-out forwards;
          animation: in 400ms ease-in-out forwards;
}


@-webkit-keyframes in {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
@keyframes in {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

Le Html : 

            <div id="formContainer">
                <div class="card">
                    <div class="card-body">
                        {!! Form::open(['route'=>'user.index', 'files' => true, 'id' => 'form-data']) !!}
                            <div id="containerSteps">
                                <div class="form-steps animate-in">
                                    Ici le formulaire appelé en ajax, mais le probleme reste présent si je ne met rien ici 
                                </div>
                             </div>
                        {!! Form::close()!!}

                    </div>
                </div>
            </div>

Je te remontre 2 screens si je ne met rien dans le formulaire, la avant l'anim, la bordure de droite du formulaire est parfaitement alignée au header : 

Et apres l'anim, elle dépasse de 1px. et les deux boutons se décalent eux aussi d'1px. On dirait que rotate, en arrivant à 0 deg, laisse derrière elle des petits bugs d'affichage

-
Edité par 1Not 2 janvier 2022 à 21:07:56

Oui exactement le même...