Como fazer o flip-card ?

Tenho um classe flip-container que engloba um cartão que tem que girar quando coloco o mouse em cima (HTML):

<div class="flip-container slider_item card-flip">
                                        <app-card></app-card>                                  
  </div>

Eu tenho que modificar a porcentagem para ficar fixa.

// CARD
.card-primary{
    background-color: $color-primary;
    @include addEase();
    &:hover{
        background-color: darken($color-primary,10%);
    }
    .card-body{
        padding:2.5rem 2rem;
    }
    a{
        color: #FFF;
        &:hover{
            text-decoration: none;
        }
    }
}


.flip-container {
    perspective: 1000px;
    height: 100%;
    @include addEase();

    &.hover,
    &:hover{
        .flipper {
            transform: rotateY(180deg);
        }
    }

    &.front,
    &.like-card{
        .flipper {
            transform: rotateY(0deg);
        }
    }

    &.card-flip{
        .flipper{
            @extend .card-shadow;
        }
    }

    @include md-down{
        .flipper {
            transform: rotateY(180deg);
        }
    }

    .flipper {
        transition: 0.4s;
        transform-style: preserve-3d;
        position: relative;
        height: 100%;

        .flip-item{
            width: 100%;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            background: #FFF;

            &.front {
                z-index: 2;
                transform: rotateY(0deg);
            }

            &.back {
                transform: rotateY(180deg);
            }

            .info-detail,
            .container-info{
                flex-direction: column;
                div{
                    padding: 0;
                }
            }

            .score{ 
                margin:auto 1rem 1rem auto;
            }

            .bg-xpert{
                height: 100px;
                display: flex;
                img{
                    margin:auto auto -60px;
                    width: 125px;
                    border-radius: 50%;
                }
            }
            .xpert-name{
                text-align: center;
            }

            .container-list {
                display: none;
            }

            .container-btn{
                width: 100%;
                justify-content: center;
            }

            @include md-up{
                .container-md-list {
                    display: none;
                }
                .container-md-grid {
                    display: block;
                }
                .score{ 
                    text-align: right;
                }
            }

        }
    }
}

.dinamic-list{
    &.list{
        .flip-container {
            .flipper {

                @include md-up{
                    .flip-item{
                        display: flex;

                        &.front {
                            .container-img{
                                height: 100%;
                            }
                        }
                        .container-profileInfo{
                            width: 33.33%;
                        }
                        .container-info{
                            width: 66.66%;
                        }

                        .xpert-name {
                            margin-top: 0 !important;
                        }
                        .score{ 
                            text-align: center;
                        }
                    }
                }

                @include md-down{
                    .back {
                        .container-btn{
                            width: 100%;
                        }
                    }
                }

                @include lg-up{
                    .flip-item{
                        .container-profileInfo{
                            width: 25%;
                        }
                        .container-info{
                            width: 75%;
                        }
                        .info-detail{
                            flex-direction: row;
                            align-items: center;
                            .col-auto{
                                padding: 0 1rem;
                            }
                        }
                    }
                }



                .container-grid {
                    display: none;
                }

                @include md-up{
                    .container-md-grid {
                        display: none;
                    }
                    .container-md-list {
                        display: block;
                    }

                    .container-btn{
                        justify-content: start;
                    }
                }

                @include lg-up {
                    .container-btn{
                        width: auto;
                        margin-left: auto;
                    }
                }
            }
        }
    }
}