Me gustaría crear una tarjeta invertida en angular, donde la casilla de verificación cambiará el lado de la tarjeta. Dividí estos formularios en dos componentes: app-login-form y app-register-form .

 <div class="form__container"> <div class="form__object"> <app-login-form [isFormActive]="loginForm"></app-login-form> <app-register-form [isFormActive]="loginForm"></app-register-form> </div> </div>

 .form__container{ width: 95%; height: 75%; margin: 0 auto; border-radius: 7px; perspective: 600px; } .form__object{ width: 100%; height: 100%; transform-style: preserve-3d; position: relative; }

Este es el código de los componentes (son similares al principio):

 <form class="form" [class.form__inactive]="isFormActive" action="#" method="post" onsubmit="#" autocomplete="on"> </form>

Y algo de código css para el componente de formulario de registro de aplicación :

 .form{ width: 100%; height: 100%; position: absolute; transform: rotateY(180deg); transition-duration: 1s; backface-visibility: hidden; background-color: chocolate; } .form__inactive{ transform: rotateY(360deg); }

Y obviamente para el formulario de inicio de sesión de la aplicación :

 .form{ width: 100%; height: 100%; position: absolute; transform: rotateY(0deg); transition-duration: 1s; backface-visibility: hidden; background-color: rgb(99, 85, 76); } .form__inactive{ transform: rotateY(180deg); }

Cuando escribí el código desde el formulario de inicio de sesión de la aplicación y el formulario de registro de la aplicación en un componente en el contenedor, no tuve ningún problema. Pero cuando dividí esto en componentes, para manejar el código más fácil de mantener, pierdo la perspectiva y mi pequeña animación se ve diferente. ¿Porqué sucedió?