I would like to create flip card in angular, where checkbox will change the card side. I divided this forms into two components: app-login-form and 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;
}

This is the code of components (they are similar at the beginning):

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

</form>

And some css code to app-register-form component:

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

.form__inactive{
    transform: rotateY(360deg);
}

And obviously for app-login-form:

.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);
}

When I wrote code from app-login-form and app-register-form into one component in container, I didn't have any problems. But when I divided this into components, to handle code easier to maintain, I am loosing a perspective, and my small animation looks differently. Why it happened?